vue---mixins的用法

相信大家都用过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;    
}

这样就减少了写的代码量。也达到了公用相同样式的目的。

 

而 vue的mixins也是同样的道理。使用公用的内容,达到指定或者所有的实例都共享这些内容。

 

那么,vue中的mixins可以定义哪些内容呢?

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

大致意思就是:

1) 混入对象的内容必须是一个对象。

2) 当使用混入时,相同的内容都会合并。

3) 数据对象如果有相同的,则以被混入的对象中data数据为准

后面会详细解释一下这几个意思。

HTML:

<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';
        }
    }
})

结果:

注意:

1) mixins 这个属性接收的是 一个数组 可以有多个mixins的内容,比如:mixins:[ mix1, mix2 , mix3],前提是定义了这些混入对象,不然就会报错。

2) 从上个栗子可以看出,只要是属于实例(或组件)的内容都是可以混入的,包括 el  。。。  

3) 混入对象中如果有生命周期的 钩子 ,那么 混入对象  和 被混入对象钩子都会被执行一遍,而且 混入对象的钩子将在  实例(或组件)自身钩子之前先执行。因为同名钩子函数将混合为一个数组,因此都将被调用。

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

4) 比如在 data 中 age 这一项是相同的,这个时候是以 被混入 的对象中数据 优先

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

 

全局混入

当然,mixins也有全局混入的方法,不过这样会让所有的实例都共享混入的内容。混入的规则还是一样的。

Vue.mixin({
   //这里是要混入的内容
})

 请谨慎使用全局混入的方法。毕竟只要使用了全局混入,所有实例都会共享  混入的内容  不管你是否   添加了  mixins 这个属性选项。

 

自定义选项合并策略

详细的可以查看官网 自定义选项合并策略

posted @ 2019-03-20 13:31  站住,别跑  阅读(6039)  评论(0编辑  收藏