Vue 混入

混入 (mixins) 是一種分發(fā) Vue 組件中可復用功能的非常靈活的方式?；烊雽ο罂梢园我饨M件選項。當組件使用混入對象時，所有混入對象的選項將被混入該組件本身的選項。

• 數(shù)據(jù)對象合并

  數(shù)據(jù)對象在內(nèi)部會進行淺合并 (一層屬性深度)，在和組件的數(shù)據(jù)發(fā)生沖突時以組件數(shù)據(jù)優(yōu)先

var mixin = {
    data() {
        return {
            msg_mixins: 'mixins',
            msg: '123'
        }
    }
}
var app = new Vue({
    mixins: [mixin],
    el: '#app',
    data: {
        msg: 'app'
    }
})

• 鉤子函數(shù)合并

同名鉤子函數(shù)將混合為一個數(shù)組，因此都將被調(diào)用。另外，混入對象的鉤子將在組件自身鉤子之前調(diào)用。

var mixin = {
    data() {
        return {
            msg_mixins: 'mixins',
            msg: '123'
        }
    },
    created: function () {
        console.log('混入對象的鉤子被調(diào)用')
    }
}
var app = new Vue({
    mixins: [mixin],
    el: '#app',
    data: {
        msg: 'app'
    },
    created: function () {
        console.log('組件鉤子被調(diào)用')
    }
})

混入鉤子函數(shù).png

• methods, components 和 directives合并

methods, components 和 directives，將被混合為同一個對象。兩個對象鍵名沖突時，取組件對象的鍵值對。

var mixin = {
    data() {
        return {
            msg_mixins: 'mixins',
            msg: '123'
        }
    },
    created: function () {
        console.log('混入對象的鉤子被調(diào)用')
    },
    methods: {
        foo: function () {
            console.log('foo')
        },
        conflicting: function () {
            console.log('from mixin')
        }
    }
}
var app = new Vue({
    mixins: [mixin],
    el: '#app',
    data: {
        msg: 'app'
    },
    created: function () {
        console.log('組件鉤子被調(diào)用')
    },
    methods: {
        bar: function () {
            console.log('bar')
        },
        conflicting: function () {
            console.log('from self')
        }
    }
})

方法混合.png

• 全局混入

一旦使用全局混入對象，將會影響到 所有 之后創(chuàng)建的 Vue 實例。

Vue.mixin({
    created: function () {
        console.log('全局混入')
    }
})

全局混入.png