Vue混入【Mixin】

196 阅读1分钟

混入 (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中的属性会进行合并 如果已有元素将进行替换