vue混入。

定义

混入是一种分发Vue组件中可复用功用异常天真的体式格局。混入对象能够包含恣意组件选项。当组件运用混入对象时,一切混入对象的选项将被混入该组件自身的选项。
例子:

//定义一个混入对象
var myMixin={
    created:function(){
        this.hello();
    },
    methods:{
        hello:function(){
            console.log('hello from mixin');
        }
    }
}
//定义一个运用混入对象的组件
var Component = Vue.extend({
    mixins:[myMixin]
})
var component = new Component();=>hello from mixin

选项兼并

当组件和混入对象含有同名选项时,这些选项将以适当的体式格局夹杂。
比方,数据对象在内部会举行递归兼并,在和组件的数据发生争执时以组件数据优先。

var mixin ={
    data:function(){
        return{
            messageL:'hello',
            foo:'abc'
        }
    },
    created(){
        console.log('混入对象的钩子被挪用')
    }
}
new Vue({
    mixins:[mixin],
    data:function(){
        return{
            message:'goodbye',
            bar:'def
        }
    },
    created:function(){
        console.log('组件钩子被挪用')
        console.log(this.$data);
        // => { message: "goodbye", foo: "abc", bar: "def" }
    }
})

值为对象的选项,比方methods,components和directives,将被夹杂为同一个对象。两个对象键名争执时,取组件对象的键值对。

var mixin={
    methods:{
        foo:function(){
            console.log('foo')
        },
        conflicting:function(){
            console.log('from mixin')
        }
    }
}
var vm = new Vue({
    mixins:[mixin],
    methods:{
        bar:function(){
            console.log('bar')
        },
        conflicting:function(){
            console.log('from self')
        }
    }
})
vm.foo()//foo
vm.bar()//bar
vm.conflicting()//form self

全局混入

也能够全局注册混入对象。注重运用!一旦运用全局混入对象,将会影响到一切以后建立的Vue实例。运用适当时,能够为自定义对象注入处置惩罚逻辑。

//为自定义的选项myOption注入一个处置惩罚器。
Vue.mixin({
    creted:function(){
        var myOption = this.$options.myOption;
        if(myOption){
            console.log(myOption)
        }
    }
})
new Vue({
    myOption:'hello'
})

郑重运用全局混入对象,由于会影响到每一个零丁建立Vue实例(包含第三方模板)。大多数情况下,只应当应用于自定义选项,就像上面示例一样。也能够将其用作Plugins以防止发生反复作用。

自定义选项兼并战略

自定义选项将运用默许战略,即简朴的掩盖已有值。假如想让自定义选项以自定义逻辑兼并,能够向Vue.config.optionMergeStrategies增加一个函数:

Vue.config.optionMergeStrategies.myOption=function(toVal,fromVal){
    return mergedVal
}

关于大多数对象选项,能够运用methods的兼并战略:

var strategies = Vue.config.optionMergeStrategies;
strategies.myOption = strategies.methods
    原文作者:Lessong
    原文地址: https://segmentfault.com/a/1190000018647608
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞