在 vue 组件内,如果想将一些公共功能,如组件、方法、钩子函数等复用,混入是一个很好的选择。
现在开始我们的混入使用吧
1、我们可以创建一个目录mixins,在创建一个comment.js文件如图:
// 在 common.js 里写你想共享的需求
export default {
created() { },
methods: {
balaHello() {
console.log('hello page component');
}
}
}
2、使用混入
- 2-1:全局混入
// 在 main.js 中直接引入
import mixin from '@/mixins/common' // 注意路径
Vue.mixin(mixin) // 注册
<!-- 使用示例:-->
<script>
export default {
mounted() {
this.balaHello() // hello page component
}
}
</script>
- 2-2:局部混入
<template>
<div>
<button @click='handleMixin'>点击我</button>
</div>
</template>
<script>
import sayMixin from '@/mixins/common'; // 1.先引入混入mixin
export default {
mixins:[sayMixin], // 2.以数组的形式注册(键是固定的)
methods:{
handleMixin(){ // 3.点击就可以调用 common.js 里面的方法
this.balaHello(); // hello page component
}
}
}
</script>
3、mixin 混入的注意事项
1、mixin 中定义的生命周期函数会比引用组件的生命周期先执行, 会和组件中定义的 methods、created 等选项合并调用
2、mixin 中定义的方法和参数在各组件中不共享,即当前组件对 mixin 的属性的修改,其他也引用了这个 mixin 的组件不会受影响
3、如果同时引入多个 mixin 对象, 执行顺序和引入顺序一致
4、要是 mixin 和组件中出现了重名现象,那么优先采用组件中定义的数据