Vue mixin实现组件功能复用示例详解
作者：张旭超
这篇文章主要为大家介绍了Vue mixin实现组件功能复用示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
Vue mixin
Vue中的mixin，是来分发Vue组件中的可复用功能。
1、方法和数据在各个组件中不共享
不像vuex那样，一个地方修改其他地方也会修改，mixin的数据的作用域就是被引入的组件内部。
2、引用组件中的钩子函数在混入对象中的钩子函数后面执行。
3、引用组件中的同名方法会覆盖混入对象中的方法，不同名的会合并。
案例分析
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>以上就是Vue mixin实现组件功能复用的详细内容，更多关于Vue mixin组件复用的资料请关注脚本之家其它相关文章！