Vue組件間通信的6種方式

1. props/$emit 父子組件通信

子組件通過 props接收父級傳遞的參數，通過$emit觸發父級方法，傳遞參數

子組件：
<input type="text" :value="title">
<button @click="addList">添加</button>
...
props: ['title'],

...
addList () {
      this.$emit('add', this.title);
...
}

父級通過 在子組件上 @方法名 監聽事件

父組件：
<Input @add="addHandler" />

addHandler (title) {
    console.log(title); // 子組件傳遞的值
}

2. 使用ref 和 $parent / $children 父子組件通信

父組件取子組件的值
1. 使用$children

this.title = this.$children[0].title;

2. 使用$ref獲取指定子組件的值

<Input ref="childInput" />

this.title = this.$refs.childInput.title;

子組件取父組件的值

// 子組件中
this.msg = this.$parent.msg;

3.使用EventBus  兄弟組件通信

其實event就是個空的vue實例，使用event.$on監聽自定義事件，evevt.$emit觸發，event.$off解除綁定

event.js

import Vue from 'vue';

export default new Vue();

兄弟1-傳值方

import event from '../../utils/event.js'

// 兄弟組件通信，觸發自定義事件
event.$emit('logTitle', this.title);

兄弟2-接收值方

import event from '../../utils/event.js'

// 綁定自定義事件
event.$on('logTitle', this.consoleTitle);
...
consoleTitle(title) {
      console.log('兄弟組件間通信', title);
}
...

beforeDestroy() {
      // 注意銷燬週期解綁自定義事件
      event.$off('logTitle', this.consoleTitle);
}

4.$attrs / $listeners 適用於 隔代組件通信

 

$attrs：包含了父作用域中不被prop所識別（且獲取）的特性綁定（class 和 style 除外）。當一個組件沒有聲明任何 prop 時，這裏會包含所有父作用域的綁定（class 和 style 除外），並且可以通過 v-bind="$attrs" 傳入內部組件。通常配合 inheritAttrs 選項一起使用

$listeners：包含了父作用域中的（不含.native 修飾器的）v-on 事件監聽器，它可以通過 v-on="$listeners" 傳入內部組件

 

5.provide ／ inject 適用於 隔代組件通信

 

祖先組件通過 provider 來提供變量，然後在子孫組件中通過 inject 來注入變量，provide ／ inject API 主要解決了跨級組件間的通信問題，不過它的使用場景，主要是子組件獲取上級組件的狀態，跨級組件之間建立了一種主動提供與依賴注入的關係

6 Vuex 適用於 父子、隔代、兄弟組件通信

Vuex 是專爲Vue.js應用程序開發的狀態管理模式

關於vuex使用，詳見 vuex 使用詳解