Vue.js: Mixins

簡介

Mixins 是一種讓元件共用功能的方法,使用方式即是將共用功能以物件(以下稱為 mixin object)的方式傳入 mixins option。mixin object 可傳入元件的任何 option,例如:data、computed 或 methods。當元件選用 Mixins 時,使用的 mixin object 會和此元件的其他 option 混用。

如下例,component 使用了「mixObj」和「mixObjAnother」兩個 mixin object。

var mixObj = {
  created: function() {
    this.hello();
  },
  methods: {
    hello: function() {
      console.log('Hello from Mixin');
    },
  },
};

var mixObjAnother = {
  created: function() {
    this.prompt();
  },
  methods: {
    prompt: function() {
      console.log('Prompt from Mixin');
    },
    hello: function() {
      console.log('Hello from Mixin Another');
    },
  },
};

var Component = Vue.extend({
  mixins: [mixObj, mixObjAnother],
});

var component = new Component();

Vue.js: Mixins

完整程式碼

Option Merging

Hooks

當元件與使用的 mixin object 有相同的 option 時,如果是鉤子(hooks),就會全部被合併為一個陣列,因此皆能被執行,並且 mixin 物件中的鉤子會先被執行。

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

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

Vue.js Mixin: Option Merging

完整程式碼

Methods, Components and Directives

如果是 Methods、Components 或 Directives,有衝突時選用元件的 option。備註:Vue.extend() 使用同樣的合併策略。

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();
vm.bar();
vm.conflicting();

Vue.js Mixin: Option Merging

完整程式碼

Global Mixin

全域宣告和使用 Mixins。

Vue.mixin({
  created: function() {
    var myOption = this.$options.myOption;
    if (myOption) {
      console.log(myOption);
    }
  },
});

new Vue({
  myOption: 'Hello World!',
});

Vue.js Mixin: Global Mixin

完整程式碼

以上參考 Mixins


vue.js vue.js components