立即学习:https://edu.csdn.net/course/play/6823/135334?utm_source=blogtoedu
mixins混入选项
Mixins一般有两种用途:
- 在你已经写好了构造器后,需要增加方法或者临时的活动时使用的方法,这时用混入会减少源代码的污染。
- 很多地方都会用到的公用方法,用混入的方法可以减少代码量,实现代码重用。
基本用法
{{number}}
<p><button @click="add">add</button></p>
var addCon={
updated:function () {
console.log("数据更新完成,更新为"+this.number);
}
};
var app=new Vue({
el:'#app',
data:{
number:1
},
methods:{
add:function () {
this.number++;
}
},
mixins:[addCon]
})
我们现在有个数字点击递增的程序,每次点击增加数字,在控制台打印出提示:“数据发生变化”.
mixins调用顺序
1、在构造器中用原生的updated方法
updated:function(){
console.log("原生的update方法");
}
2、在全局API混入方式
Vue.mixin({
updated:function () {
console.log("全局的update方法");
}
})
运行完代码可以在控制台看到全局API是首先执行,然后是构造器中的mixins选项,最后是构造器中原生updated方法。
新手一枚,若有不足,请指教!