混入 (mixin) 提供了一种非常灵活的方式,来分发 Vue 组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时,所有混入对象的选项将被“混合”进入该组件本身的选项。
全局Mixin
Vue.mixin({
data(){
return{
x:123
}
},
mounted(){
console.log(x) //123
}
})
组件中引用mixin
import './mixin.js';
全局引入之后不管是组件还是root根组件中都可以调用mixin中的方法和属性。 如果mixin和组件中属性有冲突,优先执行组件中的。
#局部Mixin
const mixin = {
data(){
return{
x:123
}
},
mounted(){
console.log(x) //123
}
}
组件中引用mixin
import mixins from './mixin.js';
minxin 会将data中的属性会进行合并 如果已有元素将进行替换