在不同component中，如果有相同的Code，
可以抽出來做Mixin，跟之前的Extend不同的是
Extend 是單一元件做延伸，但Mixin 可以混和多個元件的行為
假設有個元件原始碼是長這樣
Vue.component('row-component', {
props: ['item'],
data: function() {
return {
data: {},
}
},
template: '#row-component',
filters: {
dollarSign: function(n) {
return `$ ${n}`
},
currency: function(n) {
return n.toFixed(2).replace(/./g, function(c, i, a) {
return i && c !== "." && ((a.length - i) % 3 === 0) ? ',' + c : c;
});
}
},
mounted() {
console.log('這段是 Mixin 產生')
}
});
把template跟filters 抽出去做成 Mixin的物件
//宣告一個變數，把原本在component內的屬性放進來
var mixinFilter = {
template: '#row-component',
filters: {
dollarSign: function(n) {
return `$ ${n}`
},
currency: function(n) {
return n.toFixed(2).replace(/./g, function(c, i, a) {
return i && c !== "." && ((a.length - i) % 3 === 0) ? ',' + c : c;
});
}
},
};
把mouted再抽出去做成另外一個Mixin的物件
var mixinMounted = {
data: function() {
return {
dataMixins: 'Mixins Data'
}
},
mounted() {
console.log('這段是 Mixin 產生')
}
};
最後在component內加入屬性mixins，後面是陣列(可以混合多個mixin)
Vue.component('row-component', {
props: ['item'],
data: function() {
return {
data: {},
}
},
mixins: [mixinFilter, mixinMounted]
});
如果有其他componet要使用這些minin，直接在component內加入屬性mixins即可
Vue.component('row-component-two', {
props: ['item'],
data: function() {
return {
data: {
newData: 'New'
},
}
},
mixins: [mixinFilter, mixinMounted]
});