Vue中的mixin，是來分發Vue元件中的可複用功能。
1、方法和資料在各個元件中不共享
不像vuex那樣，一個地方修改其他地方也會修改，mixin的資料的作用域就是被引入的元件內部。
2、引用元件中的鉤子函式在混入物件中的鉤子函式後面執行。
3、引用元件中的同名方法會覆蓋混入物件中的方法，不同名的會合並。
4、案例分析
HelloWorld.vue
<template>
<div class="hello">
<div v-for="(item, index) in mixinData" :key="index">
姓名：{{item.name}}， 年齡：{{item.age}}
</div>
</div>
</template>
<script>
import CommonMethods from '../mixin/CommonMethods.vue'
export default {
name: 'HelloWorld',
mixins: [CommonMethods],
data () {
return {
msg: 'Welcome to Your Vue.js App'
}
},
mounted () {
// 1、引用元件中的鉤子函式在混入物件中的鉤子函式後面執行。
this.mixinData = [
{ name: '初始化資料', age: 10 }
]
// 2、引用元件中的同名方法會覆蓋混入物件中的方法，不同名的會合並。
this.mixinGetData()
},
methods: {
mixinGetData () {
this.mixinData = []
return []
}
}
}
</script>
CommonMethods.vue
<script>
export default {
name: 'mixinMethods',
data () {
return {
mixinData: []
}
},
mounted () {
this.mixinData = [
{ name: '初始化資料', age: 0 }
]
},
methods: {
mixinGetData () {
let data = [
{ name: 'zxc', age: 32 },
{ name: 'lvy', age: 27 }
]
this.mixinData = data
return data
}
}
}
</script>