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混入(minxins)的使用说明】以上是有关vue.js混入的实践操作和实例解析。简单说vue.js混入就是封装了方法的对象。在我们需要使用时就对象实例化。
推荐阅读
- 在vue.js中使用Ajax发送get和post请求
- 由于应用BundleID信息校正不通过，无法分享到微信的问题——已解决
- 谈谈JavaScript如何优化构造函数和对象创建
- CSS Color详细介绍
- SASS插值表达式用法介绍
- C#中的StringBuilder用法详细指南
- 如何在服务器上将HTML 5 Canvas保存为图像（）
- 算法设计（生成n位灰度码 |set 2）
- 算法设计（求最多k次交换后的最大排列）