简单聊聊Vue-----mixins的用法

理解mixins

官方说明

混入 (mixin) 提供了一种非常灵活的方式，来分发 Vue 组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被“混合”进入该组件本身的选项

举个小例子

var mix={
    data:{
        age:18,
        sex:'man',
        name:'肉丝'
    },
    mounted:function(){
        this.age++;
        console.log(this.age)//11
    },
    computed:{
        say:function(){
            return '我在mix里面'
        }
    },
    methods:{
        print:function(){
            return '这里是mix';
        }
    }
}

new Vue({
    mixins:[mix],
    data:{
        age:10
    },
    mounted:function(){
        this.age+=2;
        console.log(this.age)//13
        this.sex='woman';
    },
    computed:{
        say:function(){
            return '我在new Vue里面'
        }
    },
    methods:{
        print:function(){
            return '这里是new Vue';
        }
    }
})

得到的结果：肉丝：13，male，这里是new Vue，我再new Vue里面

当组件和混入对象含有同名选项时，这些选项将以恰当的方式进行“合并”。