1. 父子組件通信
- 基本方法（推薦）：
a. 父 => 子：使用prop向子組件傳遞靜態(tài)或動(dòng)態(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訪問(wèn)或遞歸訪問(wèn)其子孫組件陕壹。
b. 子 => 父：使用this.$parent訪問(wèn)或遞歸訪問(wèn)其父級(jí)組件，直至根組件树埠。 - 子組件索引：
a. 父 => 子：用ref屬性為子組件指定一個(gè)索引名稱糠馆，在父組件中通過(guò)this.$ref[name]訪問(wèn)ref為name的子組件。
2. 爺孫組件通信
- 父子嵌套：
a. 使用嵌套的父子通信進(jìn)行層級(jí)傳遞即可怎憋。 - 依賴注入：
a. 父級(jí)組件定義provide函數(shù)返回提供的數(shù)據(jù)又碌，子孫后代組件使用inject屬性接收上層組件provide的數(shù)據(jù)九昧。
3. 任意組件通信
- 事件總線eventBus：
-
let bus = new Vue(); Vue.prototype.bus = bus創(chuàng)建一個(gè)空的Vue實(shí)例，掛載到Vue原型上作為中央事件總線毕匀； - 在需要傳值的組件中使用
this.bus.$emit('event', data)觸發(fā)一個(gè)自定義事件铸鹰，并傳遞數(shù)據(jù)； - 在需要接收數(shù)據(jù)的組件中使用
this.bus.$on('event', data => { })監(jiān)聽(tīng)自定義事件皂岔，并在回調(diào)函數(shù)中處理傳遞過(guò)來(lái)的數(shù)據(jù)蹋笼。
-
- 使用vuex
- 創(chuàng)建一個(gè)全局state管理的 store；
- 組件中使用
this.$store.state訪問(wèn) state躁垛； - 組件中使用
commit mutation或者dispatch action來(lái)更新store里的數(shù)據(jù)剖毯。
