最近在看梁顛編著的《Vue.js實戰》一書，感覺頗有收穫，特此記錄一些比價實用的技巧。 組件是MVVM框架的核心設計思想，將各功能點組件化更利於我們在項目中復用，這類似於我們服務端面向對象三大特性之一的封裝，將複雜的會被多次調用的代碼封裝成組件,在需要調用的地方註冊使用即可。這樣設計的前端代碼方便移 ...
最近在看梁顛編著的《Vue.js實戰》一書，感覺頗有收穫，特此記錄一些比價實用的技巧。
組件是MVVM框架的核心設計思想，將各功能點組件化更利於我們在項目中復用，這類似於我們服務端面向對象三大特性之一的封裝，將複雜的會被多次調用的代碼封裝成組件,在需要調用的地方註冊使用即可。這樣設計的前端代碼方便移植，可以跨項目復用。
組件之間的關係分為父子組件兄弟組件和跨多級組件等等，在組件之間交互數據，進行通信主要通過三種方式來進行：
- 中央事件匯流排（非父子組件通信）
- 父鏈
- 子組件索引
下麵讓我們來好好說道說道這三種通信方式：
一.中央事件匯流排
這個東西名字叫的很唬人，但實際卻是很好理解的一種通信方式，話不多說，我們來上代碼。
<body> <div id="app"> {{message}} <tempcomponent-a></tempcomponent-a> </div> <script> var middleware = new Vue(); Vue.component('tempcomponent-a', { template: '<button @click="handleEvent">傳遞事件</button>', methods: { handleEvent: function () { middleware.$emit('on-message', '來自組件tempcomponent-a的內容'); } } }); var app = new Vue({ el: '#app', data: { message: '' }, mounted: function () { var _this = this; middleware.$on('on-message', function (msg) { _this.message = msg; }) }, }); </script> </body>
在上面的代碼中，空的Vue實例"middleware"就是我們的所謂的中央事件匯流排，我們可以看到，它負責在自組件"tempcomponent-a"中發出事件，在我們的主體Vue實例app中,通過監聽"middleware"來獲取子組件發出的內容。我的理解是中央事件匯流排就類似我們做交換數據的時候的臨時變數一樣，它在中間負責處理結果，然後返回消息給請求者,它的職責就是中介。這個空的vue實例也可以加入data，methods等選項，這些都是可以作為公用的。
二.父鏈$parent
父鏈這個詞就很好理解啦，顧名思義即是組件的父對象，在組件內部可以直接通過$parent對父對象進行操作
<body> <div id="app"> {{message}} <tempcomponent-a></tempcomponent-a> </div> <script> Vue.component('tempcomponent-a', { template: '<button @click="handleEvent">通過父鏈直接修改數據</button>', methods: { handleEvent: function () { this.$parent.message = '來自組件tempcomponent-a的消息'; } } }); var app = new Vue({ el: '#app', data: { message: '' } }) </script> </body>
通過上面的代碼，我們可以看到在自組件內，使用父鏈$parent直接對父對象對屬性操作是非常簡單的。
三.子組件索引ref&$refs
子組件這個也很好理解，是在父對象上對所擁有對子組件進行操作，一般來說父容器內對子組件會有多個，所以每個組件需要設置特殊屬性ref來為自身指定一個唯一名稱。
<body> <div id="app"> <button @click="handleRef">通過ref獲取子組件實例</button> <tempcomponent-a ref="comA"></tempcomponent-a> </div> <script> Vue.component('tempcomponent-a', { template: '<div>子組件</div>', data: function () { return { message: '子組件內容' } } }); var app = new Vue({ el: '#app', methods: { handleRef: function () { var msg = this.$refs.comA.message; console.log(msg); } } }) </script> </body>
從代碼可以看出，當我們直接在組件上創建ref屬性，在父對象中想對子組件進行操作，直接通過$refs.加上該組件唯一對ref屬性即可訪問。註意$refs是子組件渲染完成之後才填充對，而且不是響應式，應避免在計算屬性和模版中使用$refs
