【基础】混合是一种灵活的分布式复用 Vue 组件的方式。混合对象可以包含任意组件选项。以组件使用混合对象时,所有混合对象的选项将被混入该组件本身的选项。
【选项合并】 当组件和混合对象含有同名选项时,这些选项将以恰当的方式混合。比如,同名钩子函数将混合为一个数组,因此都将被调用。另外,混合对象的钩子将在组件自身钩子之前调用。
值为对象的选项,例如methods、components和directives,将被合并为同一个对象。两个对象键名冲突时,取组件对象的键值对。注意:Vue.extend()也使用同样的策略进行合并。
【全局混入】混入也可以进行全局注册。使用时格外小心!一旦使用全局混入,它将影响每一个之后创建的 Vue 实例。使用恰当时,这可以用来为自定义选项注入处理逻辑。
//1.创建共同方法的JS文件(MixinMethod.js)
export default {
methods: {
comMethod1: function ( ) {
console.log('共同方法1');
},
comMethod2: function ( ) {
console.log('共同方法2');
},
comMethod3: function ( ) {
console.log('共同方法3');
}
}
}
//2.在vue中引入,并实现
import MixMethod from "../mixin/MixinMethod";
export default {
name: 'test',
mixins: [ MixMethod ],
data(){},
methods: {
console.log(this.comMethod1());
console.log(this.comMethod2());
console.log(this.comMethod3());
},
}