Vue常考知識點--元件通訊

元件通訊一般分為以下幾種情況：

• 父子元件通訊
• 兄弟元件通訊
• 跨多層級元件通訊

對於以上每種情況都有多種方式去實現，接下來就來學習下如何實現。

父子通訊

• 父元件通過 props 傳遞資料給子元件，子元件通過 emit 傳送事件傳遞資料給父元件，這兩種方式是最常用的父子通訊實現辦法。
• 這種父子通訊方式也就是典型的單向資料流，父元件通過 props 傳遞資料，子元件不能直接修改 props，而是必須通過傳送事件的方式告知父元件修改資料。
• 另外這兩種方式還可以使用語法糖 v-model 來直接實現，因為 v-model 預設會解析成名為 value 的 prop 和名為 input 的事件。這種語法糖的方式是典型的雙向繫結，常用於 UI 控制元件上，但是究其根本，還是通過事件的方法讓父元件修改資料。
• 當然我們還可以通過訪問 $parent 或者 $children 物件來訪問元件例項中的方法和資料。
• 另外如果你使用 Vue 2.3 及以上版本的話還可以使用 $listeners 和 .sync 這兩個屬性。
• $listeners 屬性會將父元件中的 (不含 .native 修飾器的) v-on 事件監聽器傳遞給子元件，子元件可以通過訪問 $listeners 來自定義監聽器。
• .sync 屬性是個語法糖，可以很簡單的實現子元件與父元件通訊

<!--父元件中-->
<input :value.sync="value" />
<!--以上寫法等同於-->
<input :value="value" @update:value="v => value = v"></comp>
<!--子元件中-->
<script>
  this.$emit('update:value', 1)
</script>

兄弟元件通訊

對於這種情況可以通過查詢父元件中的子元件實現，也就是 this.$parent.$children，在 $children 中可以通過元件 name 查詢到需要的元件例項，然後進行通訊。

跨多層次元件通訊

對於這種情況可以使用 Vue 2.2 新增的 API provide / inject，雖然文件中不推薦直接使用在業務中，但是如果用得好的話還是很有用的。

假設有父元件 A，然後有一個跨多層級的子元件 B

// 父元件 A
export default {
  provide: {
    data: 1
  }
}
// 子元件 B
export default {
  inject: ['data'],
  mounted() {
    // 無論跨幾層都能獲得父元件的 data 屬性
    console.log(this.data) // => 1
  }
}

終極辦法解決一切通訊問題

只要你不怕麻煩，可以使用 Vuex 或者 Event Bus 解決上述所有的通訊情況。