組件通信

幾乎所有的mvvm框架中都要涉及組件通信的功能（吐槽一下knockout,畢竟是鼻祖就先不說(shuō)它了）。而且目前的前端形式來(lái)看，組件化是一個(gè)項(xiàng)目的基礎(chǔ)。所以選好一個(gè)合適的框架后，隨著組件的不斷增加，業(yè)務(wù)的復(fù)雜度提升，組件之間的通信變得尤為重要。

實(shí)踐方法

由于更換新的框架，我們的項(xiàng)目由Avalon更新成Vue.但是為了兼容以前的業(yè)務(wù)代碼，不能直接使用vue的標(biāo)準(zhǔn)實(shí)踐方式，我還是拿過(guò)來(lái)后封裝了一個(gè)vue的class,具體業(yè)務(wù)里面不影響使用，封裝的過(guò)程之后寫(xiě)出來(lái)再聊吧，下面來(lái)總結(jié)一下最近用到的通信實(shí)踐方法。

1.父組件是通過(guò)props傳遞數(shù)據(jù)給子組件

vmodel 中包含了兩個(gè)子組件

<div class="w-base">
  <book-component v-bind:bookdata="book"></book-component>
</div>

<div class="base">
  <node-component v-bind:catalog="catalog" ></node-component>
</div>

在上面這段代碼中我們可以看到，定義了兩個(gè)子組件，并且使用指定v-bind指令傳遞了數(shù)據(jù)，子組件會(huì)接收到傳遞的數(shù)據(jù)。

Vue.component('book-component', {
 template: tpl,//可以傳進(jìn)來(lái)子組件的模板文件
 props: ['book'],
 data: function () {
  return { myBook: this.bookdata }
 }
})

建議接收到單向的props數(shù)據(jù)后，定義一個(gè)局部變量來(lái)初始化使用。

2.父組件與子組件之間通信的其他方式

vue中給實(shí)例提供了三個(gè)我們可用的API $children 和 $refs 以及 $parent 。

$children ：當(dāng)前實(shí)例的直接子組件。需要注意 $children 并不保證順序，也不是響應(yīng)式的。

$refs ：包含了當(dāng)前實(shí)例所有擁有 ref 注冊(cè)的子組件的對(duì)象.

$parent : 當(dāng)前實(shí)例的父實(shí)例。

所以說(shuō)，如果在通信方面我們我組件想要調(diào)用子組件，能用的方法只有 $refs 了，因?yàn)?$children 是一個(gè)數(shù)組，并且不保證順序，也沒(méi)有相關(guān)的id去尋找我們需要的那個(gè)特定子組件。但是如果使用 $refs 去尋找特定子組件，那就必須要給那個(gè)子組件注冊(cè) ref 。

父組件的模版

<!-- vm.$refs.child will be the child comp instance -->
<child-component ref="child"></child-comp>

父組件

//找到子組件并且調(diào)用它的方法
var myChild = this.$refs.child;
mymyChild.func();

子組件

//找到父組件并且調(diào)用它的方法
var myParent = this.$parent;
mymyChild.func();

3.平行組件之間的兩種通信方式

a.官方提供的事件bus

var bus = new Vue()
// 觸發(fā)組件 A 中的事件
bus.$emit('id-selected', 1)
// 在組件 B 創(chuàng)建的鉤子中監(jiān)聽(tīng)事件
bus.$on('id-selected', function (id) {
 // ...
})

b.通過(guò)父組件去找兄弟組件

//找到父組件的$refs對(duì)象，然后找到組件的兄弟組件
 var $refs = this.$parent?this.$parent.$refs:{};
 var childComponent = $refs.child; //child為改組件的ref屬性值

其實(shí)以上兩種方法最好的實(shí)踐方式是封裝到項(xiàng)目的基類中，這樣不用每次都去定義一個(gè)空Vue()實(shí)例，而是每個(gè)實(shí)例的基類中都有這個(gè)事件bus。同樣可以封裝找到其他兄弟組件的方法，但是該兄弟組件必須注冊(cè)ref

下面這個(gè)方法是我在項(xiàng)目中封裝的用于找到父組件，然后再去找到兄弟組件的方法。

//平行組件之間的通信
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);

4.組件間復(fù)雜數(shù)據(jù)通信Vuex

一說(shuō)到vuex，很多剛開(kāi)始接觸vue的人會(huì)主動(dòng)避免去使用它，其實(shí)它并沒(méi)有想象中的那么復(fù)雜。最好的開(kāi)始是引入vuex后，走一遍給出的小示例。但是如果你的項(xiàng)目并不復(fù)雜的話，可以不考慮狀態(tài)管理，那么什么時(shí)候需要使用狀態(tài)管理呢？

我們來(lái)看這樣一個(gè)布局

如果component1中的某個(gè)數(shù)據(jù)變更，那么com2,com3也要跟著更新，此時(shí)com3中又細(xì)分為了三個(gè)小組件。

問(wèn)題：

1. 多個(gè)試圖依賴同一個(gè)狀態(tài)
2. 多層嵌套的組件，數(shù)據(jù)變更和代碼維護(hù)困難

那這樣的情況時(shí)，我們可以考慮使用狀態(tài)管理。下一篇文章將詳細(xì)講解關(guān)于vuex的實(shí)踐和理解。

寫(xiě)在最后的總結(jié)

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

最新評(píng)論