vue的mixin怎么使用

本篇內(nèi)容介紹了“vue的mixin怎么使用”的有關(guān)知識(shí)，在實(shí)際案例的操作過(guò)程中，不少人都會(huì)遇到這樣的困境，接下來(lái)就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細(xì)閱讀，能夠?qū)W有所成！

mixin

mixin主要是針對(duì)vue的js邏輯復(fù)用，所以它一般都是js文件。

用法

先來(lái)看看它的用法

// 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組件的用法是一樣的。 比如鉤子函數(shù)，methods的方法，data的數(shù)據(jù)等等。

然后在組件使用，通過(guò)mixins選項(xiàng)即可引入。

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

那么就會(huì)有一個(gè)問(wèn)題，那么如果組件內(nèi)也定義了同樣的鉤子函數(shù)，同名方法，同名數(shù)據(jù)，該以誰(shuí)的為準(zhǔn)？是覆蓋還是合并？

通過(guò)例子來(lái)看看

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()
  }
}

打印的結(jié)果如下：

通過(guò)以上結(jié)果可以得到，

鉤子函數(shù)會(huì)合并起來(lái)，都會(huì)執(zhí)行。先執(zhí)行mixins的鉤子函數(shù)再執(zhí)行組件的鉤子函數(shù)。

data的同名數(shù)據(jù)，要分情況討論

如果是基本類型，會(huì)用組件的同名數(shù)據(jù)覆蓋mixin的數(shù)據(jù)。

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

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

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

“vue的mixin怎么使用”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)可以關(guān)注億速云網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實(shí)用文章！