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>
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。