Vue - Mixin

在不同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]
});