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>
