Vue.js 混合

混合

基礎(chǔ)

混合以一種靈活的方式為組件提供分布復(fù)用功能?；旌蠈ο罂梢园我獾慕M件選項(xiàng)。當(dāng)組件使用了混合對象時(shí)，混合對象的所有選項(xiàng)將被“混入”組件自己的選項(xiàng)中。

示例：

// 定義一個(gè)混合對象
var myMixin = {
  created: function () {
    this.hello()
  },
  methods: {
    hello: function () {
      console.log('hello from mixin!')
    }
  }
}

// 定義一個(gè)組件，使用這個(gè)混合對象
var Component = Vue.extend({
  mixins: [myMixin]
})

var component = new Component() // -> "hello from mixin!"

選項(xiàng)合并

當(dāng)混合對象與組件包含同名選項(xiàng)時(shí)，這些選項(xiàng)將以適當(dāng)?shù)牟呗院喜ⅰ＠?，同名鉤子函數(shù)被并入一個(gè)數(shù)組，因而都會(huì)被調(diào)用。另外，混合的鉤子將在組件自己的鉤子之前調(diào)用。

var mixin = {
  created: function () {
    console.log('mixin hook called')
  }
}

new Vue({
  mixins: [mixin],
  created: function () {
    console.log('component hook called')
  }
})

// -> "mixin hook called"
// -> "component hook called"

值為對象的選項(xiàng)，如 methods, components 和 directives 將合并到同一個(gè)對象內(nèi)。如果鍵沖突則組件的選項(xiàng)優(yōu)先。

var mixin = {
  methods: {
    foo: function () {
      console.log('foo')
    },
    conflicting: function () {
      console.log('from mixin')
    }
  }
}

var vm = new Vue({
  mixins: [mixin],
  methods: {
    bar: function () {
      console.log('bar')
    },
    conflicting: function () {
      console.log('from self')
    }
  }
})

vm.foo() // -> "foo"
vm.bar() // -> "bar"
vm.conflicting() // -> "from self"

注意 Vue.extend() 使用同樣的合并策略。

全局混合

也可以全局注冊混合。小心使用！一旦全局注冊混合，它會(huì)影響所有之后創(chuàng)建的 Vue 實(shí)例。如果使用恰當(dāng)，可以為自定義選項(xiàng)注入處理邏輯：

// 為 `myOption` 自定義選項(xiàng)注入一個(gè)處理器
Vue.mixin({
  created: function () {
    var myOption = this.$options.myOption
    if (myOption) {
      console.log(myOption)
    }
  }
})

new Vue({
  myOption: 'hello!'
})
// -> "hello!"

自定義選項(xiàng)合并策略

在合并自定義選項(xiàng)時(shí)，默認(rèn)的合并策略是簡單地覆蓋已有值。如果想用自定義邏輯合并自定義選項(xiàng)，則向 Vue.config.optionMergeStrategies 添加一個(gè)函數(shù)：

Vue.config.optionMergeStrategies.myOption = function (toVal, fromVal) {
  // 返回 mergedVal
}

對于多數(shù)值為對象的選項(xiàng)，可以簡單地使用 methods 所用的合并策略:

var strategies = Vue.config.optionMergeStrategies
strategies.myOption = strategies.methods