Vue.js: Mixins
24 Sep 2017簡介
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();
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');
},
});
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();
Global Mixin
全域宣告和使用 Mixins。
Vue.mixin({
created: function() {
var myOption = this.$options.myOption;
if (myOption) {
console.log(myOption);
}
},
});
new Vue({
myOption: 'Hello World!',
});
以上參考 Mixins。