混入(mixin)提供了一種非常靈活的方式，來分發vue組件中的可復用功能。一個混入對象可以包含任意組件選項。當組件使用混入對象時，所有混入對象的選項將被“混合”進入該組件本身的選項。
1.鈎子函數
同名鈎子函數將會混合為一個數組，都將被調用到，但是混入對象的鈎子將在組件自身鈎子之前調用。
var mixin = {
created: function () {
console.log('混入對象的鈎子被調用')
}
}
new Vue({
mixins: [mixin],
created: function () {
console.log('組件鈎子被調用')
}
})
// => "混入對象的鈎子被調用"
// => "組件鈎子被調用"
2.數據對象合並
<body>
<div id="app"></div>
</body>
<script src="./vue.js"></script>
<script>
var Mixins = {
data: {
msg: 'I am Mixins',
msg1: 'I am Mixins msg1'
},
created() {
console.log('我是組件中的變量：' + this.msg2)
}
}
new Vue({
mixins: [Mixins],
el: '#app',
data: {
msg: 'I am #app',
msg2: 'I am msg2'
},
created() {
console.log(this.msg)
console.log('我是混入對象中的變量：' + this.msg1)
}
})
// 我是組件中的變量：I am msg2
// I am #app
// 我是混入對象中的變量：I am Mixins msg1
</script>
3.普通方法合並
當混合值為對象的選項時，例如 methods、components、directive，將被混合為同一個對象，兩個對象鍵名沖突時，取組件對象的鍵值對。
<body>
<div id="app"></div>
</body>
<script src="./vue.js"></script>
<script>
var Mixins = {
methods: {
mixin: function() {
console.log('Mixin')
},
mixinTwo: function () {
console.log('MixinTwo')
}
}
}
new Vue({
el: '#app',
mixins: [Mixins],
methods: {
mixin: function () {
console.log('#app')
}
},
mounted() {
this.mixin()
this.mixinTwo()
}
})
// #app
// MixinTwo
</script>
4.局部混入
在componnets目錄下新建mixins文件夾，並在mixins目錄下創建一個mixin.js文件，代碼如下：
const mixin = {
data() {
return {
msg: "hello"
}
},
methods: {
mixinMethod() {
console.log(this.msg + ',這是mixin混入方法')
}
}
}
export default mixin;
在需要的頁面中引入：
<template>
<div>{{msg}}</div>
</template>
<script>
import mixin from '../mixins/mixin'
export default {
mixins: [mixin],
data() {
return {
}
}
mounted() {
this.mixinMethod()
}
}
// hello，這是mixin混入的方法
5.全局混入
在main.js加入以下代碼
Vue.mixin({
data() {
return {
msg: 'hello'
}
},
methods: {
mixinMethod() {
console.log(this.msg+'，這是mixin混入的方法')
}
}
})
在組件中直接引用：
<template>
<div>{{msg}}</div>
</template>
<script>
export default {
data() {
return {
}
}
mounted() {
this.mixinMethod()
}
}
// hello，這是mixin混入的方法
</script>