个性化阅读
专注于IT技术分析

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混入实例-01

以上就是一个简单的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混入打印实例-02

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

三、vue.js混入全局混入

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

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

new Vue({})

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

赞(3)
未经允许不得转载:srcmini » vue.js混入(minxins)的使用说明

评论 抢沙发

评论前必须登录!