本篇文章主要介紹了Vue組件通訊實務記錄（推薦），內容挺不錯的，現在分享給大家，也給大家做個參考。
元件通訊
幾乎所有的mvvm框架中都要涉及元件通訊的功能（吐槽一下knockout,畢竟是鼻祖就先不說它了）。而且目前的前端形式來看，組件化是一個專案的基礎。所以選好適合的框架後，隨著元件的不斷增加，業務的複雜度提升，元件之間的通訊變得特別重要。
實踐方法
由於更換新的框架，我們的專案由Avalon更新成Vue.但是為了相容於先前的業務程式碼，不能直接使用vue的標準實踐方式，我還是拿過來後封裝了一個vue的class,具體業務裡面不影響使用，封裝的過程之後寫出來再聊吧，下面來總結一下最近用到的通信實踐方法。
1.父元件是透過props傳遞資料給子元件
vmodel 中包含了兩個子元件
<p class="w-base"> <book-component v-bind:bookdata="book"></book-component> </p> <p class="base"> <node-component v-bind:catalog="catalog" ></node-component> </p>
#在上面這段程式碼中我們可以看到，定義了兩個子元件，並且使用指定v-bind指令傳遞了數據，子元件會接收到傳遞的資料。
Vue.component('book-component', {
template: tpl,//可以传进来子组件的模板文件
props: ['book'],
data: function () {
return { myBook: this.bookdata }
}
})建議接收到單向的props資料後，定義一個局部變數來初始化使用。
2.父元件與子元件之間通訊的其他方式
vue中給實例提供了三個我們可用的API $children 和$refs 以及$ parent 。
$children ：目前實例的直接子元件。需要注意 $children 並不保證順序，也不是響應式的。
$refs ：包含了目前實例所有擁有 ref 註冊的子元件的物件.
$parent : 目前實例的父實例。
所以說，如果在通訊方面我們我元件想要呼叫子元件，能用的方法只有$refs 了，因為$children 是一個數組，並且不保證順序，也沒有相關的id去尋找我們需要的那個特定子組件。但如果使用 $refs 去尋找特定子元件，那就必須為那個子元件註冊 ref 。
父元件的範本
<!-- vm.$refs.child will be the child comp instance --> <child-component ref="child"></child-comp>
#父元件
//找到子组件并且调用它的方法 var myChild = this.$refs.child; mymyChild.func();
##子元件
//找到父组件并且调用它的方法 var myParent = this.$parent; mymyChild.func();
a.官方提供的事件bus
var bus = new Vue()
// 触发组件 A 中的事件
bus.$emit('id-selected', 1)
// 在组件 B 创建的钩子中监听事件
bus.$on('id-selected', function (id) {
// ...
})b.透過父元件去找兄弟元件
//找到父组件的$refs对象，然后找到组件的兄弟组件
var $refs = this.$parent?this.$parent.$refs:{};
var childComponent = $refs.child; //child为改组件的ref属性值登入後複製
其實以上兩種方法最好的實踐方式是封裝到專案的基底類別中，這樣不用每次都去定義一個空Vue()實例，而是每個實例的基底類別中都有這個事件bus。同樣可以封裝找到其他兄弟元件的方法，但是該兄弟元件必須註冊ref
下面這個方法是我在專案中封裝的用於找到父元件，然後再去找到兄弟元件的方法。
//平行组件之间的通信
getComponentByRef: function(refId) {
var $refs = this.$parent?this.$parent.$refs:{};
for (var $id in $refs) {
if ($id == refId) {
return $refs[$id];
}
}
return null;
}使用
//在组件中直接使用
this.getComponentByRef("booknode").updateNode(this.node);一說到vuex，很多剛開始接觸vue的人會主動避免去使用它，其實它並沒有想像中的那麼複雜。最好的開始是引入vuex後，走一遍給出的小範例。但是如果你的專案不複雜的話，可以不考慮狀態管理，那麼什麼時候需要使用狀態管理呢？
那這樣的情況時，我們可以考慮使用狀態管理。下一篇文章將詳細講解關於vuex的實踐和理解。
以上就是本文的全部內容，希望對大家的學習有所幫助，更多相關內容請關注PHP中文網！ ######相關推薦：#########Vue2.0 多Tab切換元件的封裝介紹###############Vue新增請求攔截器及vue -resource 攔截器的使用############################以上是Vue組件通訊實務的介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章！
