鍍金池/ 教程/ HTML/ 混合
自定義過濾器
自定義指令
概述
安裝
起步
深入響應(yīng)式原理
Class 與 Style 綁定
混合
列表渲染
方法與事件處理器
表單控件綁定
對比其它框架
組件
計算屬性
插件
數(shù)據(jù)綁定語法
構(gòu)建大型應(yīng)用
條件渲染
Vue 實例
過渡

混合

基礎(chǔ)

混合以一種靈活的方式為組件提供分布復(fù)用功能。混合對象可以包含任意的組件選項。當(dāng)組件使用了混合對象時,混合對象的所有選項將被“混入”組件自己的選項中。

示例:

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

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

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

選項合并

當(dāng)混合對象與組件包含同名選項時,這些選項將以適當(dāng)?shù)牟呗院喜?。例如,同名鉤子函數(shù)被并入一個數(shù)組,因而都會被調(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"

值為對象的選項,如 methods, componentsdirectives 將合并到同一個對象內(nèi)。如果鍵沖突則組件的選項優(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() 使用同樣的合并策略。

全局混合

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

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

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

自定義選項合并策略

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

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

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

var strategies = Vue.config.optionMergeStrategies
strategies.myOption = strategies.methods
上一篇:概述