对一个项目中很多会重复使用到的函数我们可以使用到vue的mixin(混入)，这样就不需要在多个页面中重复的书写相同的代码
1.定义一个mixin
// mixin.js
const mixin = {
data() {
return {
hello: 'hello Mixin'
}
},
created() {
console.log('在mixin中vue的data、生命周期、方法等都可以使用');
},
methods: {
hello() {
console.log(this.hello);
}
}
}
export default mixin;
使用mixin
// 1. 局部使用
import mixin from '@/mixin/mixin';
<script>
export default {
mixins: [mixin]
}
</script>
// 2.全局使用 main.js
import mixin from '@/mixin/mixin';
Vue.Mixin(mixin)
注意
1.在mixin中写的所有的数据，方法以及生命周期钩子，如果当前组件中已经含有了，那么就会合并起来
2.如果键值对的值重复了，就会以组件内的值为准，如components
3.如果是data数据，会被进行递归合并，如果发生冲突时，就会使用组件内的数据
4.混入时发生了冲突的话，vue会依照就近原则进行处理数据
