Vue选项
Vue中的mixins选项
mixins选项的用途：
- 在内部构造器写完之后，如需要临时添加方法或是临时改变显示效果，这时利用混入会减少污染代码
- 在需要使用公用方法时，可以减少污染代码，避免代码重复
1.在构造器内部使用mixins
mixins后面接的是一个数组：
mixins:[mixinsNum]
2.在构造器外部使用mixins，即全局API
全局混入，这是使用mixin，后面接的是对象{}
Vue.mixin({
updated:function(){
console.log("我是全局API混入")
}
})
原生方法，全局混入方法以及混入方法的执行顺序：
全局混入>混入>原生
现在实现点击按钮数值增加1的功能，并且每次数据变化时都能够在控制台打印出提示：“数值发生了变化,变成~”.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>mixins选项</title>
<script src="../assets/js/vue.js" type="text/javascript"></script>
</head>
<body>
<div id="app">
<h1>Vue中mixins选项---混入事件</h1>
<p>数值:{{num}}</p>
<chu @click.native="add"></chu>
</div>
<script type="text/javascript">
var chun={
template:`<p><button>{{tips}}</button></p>`,
data:function(){
return{
tips:'Add',
}
}
};
var mixinsNum={
updated:function(){
console.log("数值发生了变化,变成"+this.num)
}
};
Vue.mixin({
updated:function(){
console.log("我是全局API混入")
}
})
var demo=new Vue({
el:'#app',
data:{
num:1
},
methods:{
add:function(){
this.num++;
}
},
components:{
"chu":chun
},
updated:function(){
console.log("我是构造器内部的原生方法")
},
mixins:[mixinsNum]
});
</script>
</body>
</html>
运行结果：
附加：
PS：全局混入的执行顺序要前于混入和构造器里的方法。
PS：当混入方法和构造器的方法重名时，混入的方法无法展现，也就是不起作用。
自定义组件调用原生方法，需要使用native修饰器
<chu @click.native="add"></chu>
