Introduction to related operations of vue mixing (with examples)

This article brings you an introduction to the relevant operations of vue mixing (with examples). It has a certain reference value. Friends in need can refer to it. I hope it will be helpful to you. help.

Definition: Mixing is a very flexible way to distribute reusable functions in Vue components. Mixins can contain arbitrary component options. When a component uses a mixin object, all options of the mixin object will be mixed into the options of the component itself.

Example:

//定义一个混入对象
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

Option merge

When components and mixin objects contain options with the same name, these options will be mixed in the appropriate way.
For example, data objects will be recursively merged internally, and when there is a conflict with component data, component data will take precedence.

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" }
    }
})

Options whose values ​​are objects, such as methods, components and directives, will be mixed into the same object. When the key names of two objects conflict, the key-value pair of the component object is taken.

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

Global mix-in

You can also register mix-in objects globally. Pay attention to use! Once a global mixin object is used, it will affect all Vue instances created later. When used appropriately, custom objects can be infused with processing logic.

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

Use global mix-in objects with caution, as it will affect each individually created Vue instance (including third-party templates). In most cases, this should only be applied to custom options, like the example above. It can also be used as Plugins to avoid duplication of effects.

Custom option merge strategy

Custom options will use the default strategy, which is to simply overwrite existing values. If you want custom options to be merged with custom logic, you can add a function to Vue.config.optionMergeStrategies:

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

For most object options, you can use the merge strategy of methods:

var strategies = Vue.config.optionMergeStrategies;
strategies.myOption = strategies.methods

This article has ended here. For more other exciting content, you can pay attention to the JavaScript Video Tutorial column on the PHP Chinese website!

The above is the detailed content of Introduction to related operations of vue mixing (with examples). For more information, please follow other related articles on the PHP Chinese website!