一 確定組件關系
二 使用第一步確定的組件關系在下面找到使用方法
1 父子通信（子組件使用父組件數據渲染）

a) 在 子組件 中添加props
props: [自定義prop名字]
b) 在子組件中把自定義prop當data使用即可
c) 找到父組件模板 中的 子組件標簽，添加屬性
<子組件標簽 :自定義prop名字="父組件data中的數據"></子組件標簽>

2 子父通信（子組件想要發送數據給父組件時）

a) 在子組件中對應的元素上綁定相關事件，在事件函數中觸發自定義事件
<元素 @click="子組件methods函數"></元素>
 

{
methods: {
函數 () {
this.$emit(‘自定義事件名‘, 數據)
}
}
}
b) 在父組件中的methods裏添加數據處理函數
{
methods: {
處理數據函數 (data) {
data就是$emit傳遞過來的數據
}
}
}
c) 在父組件組件模板中找到子組件標簽，然後在子組件標簽上綁定自定義事件
<子組件標簽 @自定義事件名="第二步中創建的函數名"></子組件標簽>

3 非父子通信（一個組件想要傳遞數據到另一個組件時）

a) 創建一個公共的實例對象
const bus = new Vue()
或者
const EventHub = new Vue()
b) 在要傳遞數據的組件中添加methods，並給對應元素綁定事件執行該函數
{
methods: {
函數 () {
// 觸發自定義事件
bus.$emit(‘自定義事件名‘, 數據)
}
}
}
 
<元素 @click="函數">
c) 在要接收數據的組件中添加created，在created函數中添加監聽
created () {
bus.$on(‘自定義事件名‘, (data) => {
// data就是傳遞來的數據
})
}

vue的三種通信方式