vue mixins
生活随笔
收集整理的這篇文章主要介紹了
vue mixins
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
1.mixins: 這個屬性是個數組，也就是說可以加載多個 minxin 文件。
mixins中的方法是完成業務邏輯。所以在組件的生命周期中都會添加 this.handlePlaylist() 方法。
這樣就可以減少一部分代碼。
- 在你已經寫好了構造器后，需要增加方法或者臨時的活動時使用的方法，這時用混入會減少源代碼的污染。
- 很多地方都會用到的公用方法，用混入的方法可以減少代碼量，實現代碼重用。
Mixins的基本用法
我們現在有個數字點擊遞增的程序，假設已經完成了，這時我們希望每次數據變化時都能夠在控制臺打印出提示：“數據發生變化”.
代碼實現過程:
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><script type="text/javascript" src="../assets/js/vue.js"></script><title>Mixins Option Demo</title> </head> <body><h1>Mixins Option Demo</h1><hr><div id="app"><p>num:{{ num }}</p><P><button @click="add">增加數量</button></P></div><script type="text/javascript">//額外臨時加入時，用于顯示日志var addLog={updated:function(){console.log("數據放生變化,變化成"+this.num+".");}}var app=new Vue({el:'#app',data:{num:1},methods:{add:function(){this.num++;}},mixins:[addLog]//混入})</script> </body> </html> 復制代碼mixins的調用順序
執行的先后順序來說，都是混入的先執行，然后構造器里的再執行，需要注意的是，這并不是方法的覆蓋，而是被執行了兩邊。
在上邊的代碼的構造器里我們也加入了updated的鉤子函數：
updated:function(){console.log("構造器里的updated方法。")}, 復制代碼這時控制臺輸出的順序是：
mixins數據放生變化,變化成2. 構造器里的updated方法。 復制代碼PS: 當混入方法和構造器的方法重名時，混入的方法無法展現，也就是不起作用。
全局API混入方式
我們也可以定義全局的混入，這樣在需要這段代碼的地方直接引入js，就可以擁有這個功能了。我們來看一下全局混入的方法：
Vue.mixin({updated:function(){console.log('我是全局被混入的');}}) 復制代碼PS：全局混入的執行順序要前于混入和構造器里的方法。
總結
以上是生活随笔為你收集整理的vue mixins的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 面向对象进阶------内置函数 st
- 下一篇： redhat 安装Rabbitmq