Vue組件通訊實務的介紹

本篇文章主要介紹了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();

3.平行元件之間的兩種通訊方式

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);

1. ##4.組件間複雜資料通訊Vuex

2. 一說到vuex，很多剛開始接觸vue的人會主動避免去使用它，其實它並沒有想像中的那麼複雜。最好的開始是引入vuex後，走一遍給出的小範例。但是如果你的專案不複雜的話，可以不考慮狀態管理，那麼什麼時候需要使用狀態管理呢？

我們來看這樣一個佈局

如果component1中的某個資料變更，那麼com2,com3也要跟著更新，此時com3中又細分為了三個小組件。

問題：

多個試圖依賴同一個狀態

多層巢狀的元件，當資料變更和程式碼維護困難

那這樣的情況時，我們可以考慮使用狀態管理。下一篇文章將詳細講解關於vuex的實踐和理解。

以上就是本文的全部內容，希望對大家的學習有所幫助，更多相關內容請關注PHP中文網！ ######相關推薦：#########Vue2.0 多Tab切換元件的封裝介紹###############Vue新增請求攔截器及vue -resource 攔截器的使用############################

以上是Vue組件通訊實務的介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章！