vue元件詳解元件通訊

元件之間通訊可以用下圖表示：

元件關係可分為父子元件通訊、兄弟元件通訊、跨級元件通訊。

一、自定義事件

當子元件需要向父元件傳遞資料時，就要用到自定義事件。

子元件用$emit （）來觸發事件，父元件用$on（）來監昕子元件的事件。

父元件可以直接在子元件的自定義標籤上使用v-on 來監昕子元件觸發的自定義事件，如：

二、使用v-model

vue2 .x 可以在自定義元件上使用v-model 指令，直接看乙個事例：

//這個地方v-model實際是乙個語法糖,可以直接理解為接收到廣播input裡面的資料(this.total=count)。

v-model 還可以用來建立自定義的表單輸入元件，進行資料雙向繫結，例如：

父元件的total發生變化時，會通過傳遞value值，影響子元件input中的value值，而子元件改變自己input中的value值，又會廣播給父元件，影響父元件中的total值。

實現這樣乙個具有雙向繫結的v -model 元件要滿足下面兩個要求：

•接收乙個value 屬性。

• 在有新的value 時觸發input 事件。

三、非父子元件通訊

在vue . 2.x 中，推薦使用乙個空的vue 例項作為**事件匯流排（ bu s ），也就是乙個中介。

直接看乙個事例：

var bus = new vue();
vue.component('my-component12',
}}); data:,
mounted: function())
}});

這種方法巧妙而輕量地實現了任何元件間的通訊，包括父子、兄弟、跨級，而且vue 1.x 和vue 2.x 都適用。

四、父鏈與子元件索引

除了**事件匯流排bus 外，還有兩種方法可以實現元件間通訊：父鏈和子元件索引。

在子元件中，使用this.$parent 可以直接訪問該元件的父例項或元件，父元件也可以通過this.$children 訪問它所有的子元件，而且可以遞迴向上或向下無線訪問，直到根例項或最內層的元件。

4.1父鏈

vue.component('my-component13',
}}); data:
});

儘管v ue 允許這樣操作，但在業務中，子元件應該盡可能地避免依賴父元件的資料，更不應該去主動修改它的資料，因為這樣使得父子元件緊藕合，理想情況下，只有元件自己能修改它的狀態。

4.2 子元件索引

當子元件較多時，通過this.$children 來一一遍歷出我們需要的乙個元件例項是比較困難的，尤其是元件動態渲染時，它們的序列是不固定的。vue 提供了子元件索引的方法，用特殊的屬性ref來為子元件指定乙個索引名稱。

通過ref獲取子元件例項

vue.component('my-component14',
}}); data:,
methods: 
}});

在父元件模板中，子元件標籤上使用ref 指定乙個名稱，井在父元件內通過this.$refs 來訪問指定名稱的子元件。

$refs 只在元件渲染完成後才填充，並且它是非響應式的．它僅僅作為乙個直接訪問子元件的應急方案，應當盡量避免在模板或計算屬性中使用$refs。

vue元件詳解 元件通訊