vue---mixins的用法-白红宇

vue---mixins的用法

阅读量：4313 次

发布时间：2019-06-06

本文共 2050 字，大约阅读时间需要 6 分钟。

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


     
      {
   {name}}：{
   {age}}，{
   {sex}}，{
   {print()}}，{
   {say}}

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 这个属性选项。

自定义选项合并策略

详细的可以查看官网

转载于:https://www.cnblogs.com/zjjDaily/p/10564383.html

你可能感兴趣的文章