Vue組件通信的示例分析

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

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

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

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í)例。

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

父組件的模版

父組件

//找到子組件并且調(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)聽事件
bus.$on('id-selected', function (id) {
 // ...
})

b.通過父組件去找兄弟組件

//找到父組件的$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

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

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

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

以上是“Vue組件通信的示例分析”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對(duì)大家有幫助，更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！