1. 父子組件通信
- 基本方法（推薦）：
a. 父 => 子：使用prop向子組件傳遞靜態(tài)或動態(tài)的數(shù)據(jù)，如：<blog-post :title="vue"></blog-post>，注意傳遞的數(shù)據(jù)需要在子組件用props屬性接收。
b. 子 => 父：使用 v-on:event 和 $emit。父組件使用 v-on 或 @ 向子組件傳遞事件，再在子組件中調(diào)用 $emit 觸發(fā)事件即可，注意傳遞的事件不需要在子組件的props中接收。 - 父子組件鏈（不推薦）：
a. 父 => 子：使用this.$children訪問或遞歸訪問其子孫組件。
b. 子 => 父：使用this.$parent訪問或遞歸訪問其父級組件，直至根組件。 - 子組件索引：
a. 父 => 子：用ref屬性為子組件指定一個索引名稱，在父組件中通過this.$ref[name]訪問ref為name的子組件。
2. 爺孫組件通信
- 父子嵌套：
a. 使用嵌套的父子通信進行層級傳遞即可。 - 依賴注入：
a. 父級組件定義provide函數(shù)返回提供的數(shù)據(jù)，子孫后代組件使用inject屬性接收上層組件provide的數(shù)據(jù)。
3. 任意組件通信
- 事件總線eventBus：
-
let bus = new Vue(); Vue.prototype.bus = bus創(chuàng)建一個空的Vue實例，掛載到Vue原型上作為中央事件總線； - 在需要傳值的組件中使用
this.bus.$emit('event', data)觸發(fā)一個自定義事件，并傳遞數(shù)據(jù)； - 在需要接收數(shù)據(jù)的組件中使用
this.bus.$on('event', data => { })監(jiān)聽自定義事件，并在回調(diào)函數(shù)中處理傳遞過來的數(shù)據(jù)。
-
- 使用vuex
- 創(chuàng)建一個全局state管理的 store；
- 組件中使用
this.$store.state訪問 state； - 組件中使用
commit mutation或者dispatch action來更新store里的數(shù)據(jù)。
