vue.js混入(minxins)的使用说明

Vue.js混入(mixins)的是什么意思？作用是什么？vue.js混入用来定义一部分可复用的方法和计算属性，直接插入任意组件选项使用。在什么情况下适合使用？就是当你写好你的程序构造器组件的后，需要额外增加一些方法或者是需要建造临时的功能的时候使用，会大大的减少代码量。建造好vue.js混入后还可以在其他地方时候，实现了代码的重用。

一、vue.js混入的基本用法

例如以下这个时间相互转换的例子：

<div id = "mixins">
<p>num:{{ num }}</p>
<P><button @click="add">增加数量</button></P>
</div>
<script type = "text/javascript">

var app=new Vue({
el:'#mixins',
data:{
num:0
},
methods:{
add:function(){
this.num++;
}
},
})
</script>

上面是一个已经写好了的程序，每次点击都会增加1。现在想额外增加一个功能，可以在每次发生数据变化时都在控制台打印出来。

增加的vue.js混入如下：

<script type = "text/javascript">

var Mymixin={
updated:function(){
console.log("之前的数据是"+this.num+".");
}
}
var app=new Vue({
el:'#mixins',
data:{
num:0
},
methods:{
add:function(){
this.num++;
}
},
mixins:[Mymixin]//混入
})
</script>

以上就是一个简单的vue.js混入。

二、vue.js混入的逻辑顺序

如上例子，我的vue.js混入的对象名字是updated，如果我的vue.js混入对象的名字和组件的名字相同，会先执行那个呢？一般来说是按顺序执行的。在vue.js混入中，而当相同的对象名字在methods中，会以Vue 实例优先级会较高。

例如：

<script type = "text/javascript">

var Mymixin={
add:function(){
console.log("之前的数据是"+this.num+".");
}
}
var app=new Vue({
el:'#mixins',
data:{
num:0
},
methods:{
add:function(){
this.num++;
console.log("vue实例中打印"+this.num+".");
}
},
mixins:[Mymixin]//混入
})
</script>

vue.js混入的方法无法再执行，起不了作用。

三、vue.js混入全局混入

全局混入的意思自定义了一个全局的实例，如果需要这个混入功能直接new     Vue({})创建实例对象就可以了。

Vue.mixin({
created: function () {
console.log("vue.js混入")
}
})

new Vue({})

以上是有关vue.js混入的实践操作和实例解析。简单说vue.js混入就是封装了方法的对象。在我们需要使用时就对象实例化。