vue的mixin怎么使用

本篇內容介紹了“vue的mixin怎么使用”的有關知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領大家學習一下如何處理這些情況吧！希望大家仔細閱讀，能夠學有所成！

mixin

mixin主要是針對vue的js邏輯復用，所以它一般都是js文件。

用法

先來看看它的用法

// name.js
export default {
  data () {
    return {
      name: 'mixin的name',
      obj: {name:'mixin', value:'mixin'}
    }
  },
  methods: {
    getName () {
      console.log('我是mixin,name:', this.name)
      console.log('obj:', this.obj)
    }
  },
  mounted () {
    console.log('我是mixin的mounted')
    this.getName()
  }
}

它的用法和vue組件的用法是一樣的。 比如鉤子函數，methods的方法，data的數據等等。

然后在組件使用，通過mixins選項即可引入。

import name from './name.js'
export default {
  mixins: [name],
  data () {
  }
}

那么就會有一個問題，那么如果組件內也定義了同樣的鉤子函數，同名方法，同名數據，該以誰的為準？是覆蓋還是合并？

通過例子來看看

import name from './name.js'
export default {
  mixins: [name],
  data () {
    name: '組件的name',
    obj: {name:'component'}
  },
  methods: {
    getName () {
      console.log('我是組件,name:', this.name)
      console.log('obj:', this.obj)
    }
  },
  mounted () {
    console.log('我是組件的mounted')
    this.getName()
  }
}

打印的結果如下：

通過以上結果可以得到，

鉤子函數會合并起來，都會執行。先執行mixins的鉤子函數再執行組件的鉤子函數。

data的同名數據，要分情況討論

如果是基本類型，會用組件的同名數據覆蓋mixin的數據。

但是如果是對象，會遞歸對比key，如果是同名key則會覆蓋，如果不是同名的，則保留。

methods的方法也是一樣，會用組件的方法覆蓋mixin的同名方法。

除了上面這些選項，還有比如components（組件），和directives(指令)等也是一樣的邏輯，同名的會覆蓋，以組件的為優先。

“vue的mixin怎么使用”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識可以關注億速云網站，小編將為大家輸出更多高質量的實用文章！