vue---mixins的用法

vue—mixins的用法

最近接手项目，使用mixins混入对象，总结一下，不喜勿喷哦！

官网的说明：混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被混入该组件本身的选项。

大致意思就是：
1） 混入对象的内容必须是一个对象。
2） 当使用混入时，相同的内容都会合并。
3） 数据对象如果有相同的，则以被混入的对象中data数据为准

• 元素

<div id="box">{{name}}：{{age}}，{{sex}}，{{print()}}，{{say}} </div>

• js

var mix={
    el:"#box",
    data:{
        age:18,
        sex:'female',
        name:'程序员'
    },
    mounted:function(){
        this.age++;
        console.log(this.age)//11
    },
    computed:{
        say:function(){
            return '我在mix里面'
        }
    },
    methods:{
        print:function(){
            return '这里是mix';
        }
    }
}

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

结果

程序员：13，male,这里是new Vue,我在new Vue里面。

== 注意==
1） 混入的方法methods，计算属性computed ，组件components，数据data等，只要值是为对象的，都是会被合并的。并且如果有相同的键值 ， 则会以 被混入对象中的 键值 即 以实例（或对象）中的内容为准。

2） 比如在 data 中 age 这一项是相同的，这个时候是以 被混入 的对象中数据 优先 。

3） 所以 age 是 13 就很好理解了。 首先 被混入的对象的data数据优先，那么 age就是 10 ；然后 到达生命周期 mounted 的时候，混入的对象中的代码，执行一次，被混入的实例中的代码，再执行一次。 所以最终的结果就是13。

vue项目中都用过less、sass等预编译器。它们中也有mixins，用法也很简单，例如Less中：

.box{
  border:1px solid red;
  padding:10px;    
}
.mixin{
  .box;
  margin:10px;    
}

修改之后就是

.box{
  border:1px solid red;
  padding:10px;    
}
.mixin{
  border:1px solid red;
  padding:10px;
  margin:10px;    
}