在vue的官方文檔是這樣解釋的：混入 (mixin) 提供了一種非常靈活的方式甲棍，來分發(fā) Vue 組件中的可復(fù)用功能。一個(gè)混入對(duì)象可以包含任意組件選項(xiàng)锄开。當(dāng)組件使用混入對(duì)象時(shí)梳猪，所有混入對(duì)象的選項(xiàng)將被“混合”進(jìn)入該組件本身的選項(xiàng)彩扔。簡(jiǎn)單的理解就是它可以制作一個(gè)可以復(fù)用的功能妆档，可以復(fù)用到各個(gè)組件中，同時(shí)呢這個(gè)mixin功能可以使用vue組件里任意組件選項(xiàng)虫碉，比如data贾惦，method，watch敦捧，和各個(gè)生命周期函數(shù)须板。當(dāng)需要運(yùn)用的組件，引用它時(shí)兢卵，相當(dāng)于把mixin的各個(gè)組件選項(xiàng)合并到引用的組件中习瑰。
var mixin = {
data: function () {
return {
message: 'hello',
foo: 'abc'
}
}
}
new Vue({
mixins: [mixin],
data: function () {
return {
message: 'goodbye',
bar: 'def'
}
},
created: function () {
console.log(this.$data)
// => { message: "goodbye", foo: "abc", bar: "def" }
}
})
我們可以看到，鉤子函數(shù)created所打印的數(shù)據(jù)也包含有對(duì)象mixin data里的數(shù)據(jù)秽荤。
項(xiàng)目中的運(yùn)用
項(xiàng)目中我們可以創(chuàng)建一個(gè)mixins的文件夾甜奄，文件里有我們需要運(yùn)用的mixin功能文件
在需要運(yùn)用的組件里引用我們需要的mixins文件
<script>
import toggle from "@/components/mixins/toggle.js";
export default {
mixins: [toggle],
}
</script>
這樣我們就可以復(fù)用toggle.js里的toggleShow方法了。
使用場(chǎng)景
給項(xiàng)目添加可以復(fù)用的功能窃款，有很多方法课兄，那我們應(yīng)該在什么使用運(yùn)用vue mixin功能呢？我的理解是如果一個(gè)功能需要運(yùn)用vue 組件里的組件選項(xiàng)雁乡，比如data第喳，computed，以及各種鉤子函數(shù)的時(shí)候踱稍，用mixin是首選曲饱。
