混合

1.合并

一種分發Vue組件中可復用功能的方式

var mixin = {
    //同名鉤子合并為一個數組，依次調用
    created: function () {
        console.log('混合對象的鉤子被調用');
    },
    //methods, components, directives同名函數合并，取組件對象中的鍵值對
    methods: {
        confliction: function () {
            console.log('混合對象');
        }
    }
};

//輸出:
//混合對象的鉤子被調用
//組件鉤子調用
var app = new Vue({
    mixins: [mixin],
    created: function () {
        console.log('組件鉤子調用');
    },
    methods: {
        confliction: function () {
            console.log('組件對象');
        }
    }
});

//輸出:組件對象
app.confliction();

Vue.extend()合并策略相同

2.全局混合

//輸出:66
Vue.mixin({
    created: function () {
        console.log(this.$options.name);
    }
});

new Vue({
    name: "66"
});

謹慎使用全局混合對象，會影響每個單獨創建的Vue實例

3.自定義選項合并策略

使用Vue.config.optionMergeStrategies添加，自定義合并策略

最后編輯于 ：
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發布，文章內容僅代表作者本人觀點，簡書系信息發布平臺，僅提供信息存儲服務。

推薦閱讀更多精彩內容