Vue 詳盡的組件通訊

父子組件通訊

1. props

最常規的父子組件傳值方法，在此很少贅述

值得一提的是，子組件中能夠用 $attrs 獲取父組件傳來的全部屬性（除了 class、style），從而不用一個個聲明 prop。

若是不用 prop 聲明接收，Vue 會默認將這些屬性掛載到 子組件的 dom 根元素上。若是不但願這樣，能夠設置 inheritAttrs 去除這一默認行爲。

export default {
  inheritAttrs: false
}
複製代碼

若是須要傳給更深一層的子組件，只需經過 v-bind="$attrs" 傳入

2. 分發事件

除了 $emit 能夠向父組件分發事件以外

還有一個與 $attrs 相似的一個 api ：$listener，能夠拿到父組件上的全部事件監聽器。一樣的，v-on="$listeners" 能夠將之傳給更深一層的子組件

經過 $listeners.xxx 能夠直接觸發父組件的 xxx 監聽器

3. 插槽

插槽最多見的用法是：在子組件中使用 slot 插槽，在父組件中對其進行填充，能夠是具名插槽也能夠是匿名插槽。

除了這種用法之外，父組件還能夠拿到子組件在插槽上傳遞的數據，也就是做用域插槽：

子組件中經過 v-bind 綁定數據

<template>
  <div class="child">
    <slot v-bind:data="data"></slot>
  </div>
</template>
複製代碼

父組件中能夠經過 v-slot 接收

<child v-slot:default="slotData">
  {{ slotData.data }}
</child>
複製代碼

4. 父組件的共享 — 注入

父組件能夠將一些共享的數據注入，後代經過 inject 選項接收後直接可使用，這些數據將會是共享的。

// 父組件中
provide(){
  return {
    parentData: this.data
  }
}

// 子組件中
inject: ['parentData']
// 經過 this.parentData 便可訪問
複製代碼

甚至，你還能夠將父組件整個共享：

provide(){
  return {
    parent: this
  }
}
複製代碼

5. 父鏈子鏈

經過 this.$parent 能夠訪問到父組件的數據，this.$parent.$parent 能夠訪問到爺組件。

與此相似，還有 this.$children

可是過分使用可能會形成代碼混亂，尤爲是組件嵌套很深時。

非父子組件通訊

eventBus

// 父組件
data(){
  return {
    bus: new Vue()
  }
}
provide(){
  return {
    eventBus: this.bus
  }
}
複製代碼

這裏借用到上面的注入方法，不過此次注入的是一個 Vue 實例，緣由是：這裏注入的內容應該是一個事件中心，恰好 Vue 實例提供了 $on $emit 方法，咱們能夠直接借用

至於爲何要放在 data 中，是由於這樣父組件也能夠拿到這個 eventBus，也能夠進行事件的監聽和分發。

在其餘組件中接收這個事件中心：

inject: ['eventBus']
複製代碼

當須要監聽事件時，只須要經過 $on 添加事件監聽器便可：

this.eventBus.$on('change', (data) => {
  // ...
})
複製代碼

當分發一個事件後，全部監聽了這個事件的組件都會觸發回調，拿到傳遞的數據：

this.$eventBus.$emit('change', someData)
複製代碼