vue組件之間的通信都有哪些？
- 父子組件通信：
- Props：父組件通過props將數(shù)據(jù)傳遞給子組件，子組件通過props接收父組件傳遞的數(shù)據(jù)。
- Events：子組件通過$emit觸發(fā)事件，并將數(shù)據(jù)傳遞給父組件，父組件通過監(jiān)聽子組件的事件來接收數(shù)據(jù)。
- 兄弟組件通信：
- 共同的父組件作為中介：兩個兄弟組件通過共同的父組件作為中介進行通信，父組件接收一個子組件的數(shù)據(jù)，并通過props傳遞給另一個子組件。
- 事件總線：可以創(chuàng)建一個Vue實例作為事件總線，兄弟組件都可以通過該事件總線來進行事件的發(fā)布和訂閱，實現(xiàn)通信。
- 跨層級組件通信：
- provide / inject：祖先組件通過provide提供數(shù)據(jù)，后代組件通過inject來注入數(shù)據(jù)，實現(xiàn)跨層級組件之間的通信。
- Vuex：使用Vuex作為狀態(tài)管理庫，在其中定義共享的狀態(tài)，所有組件都可以訪問和修改這些狀態(tài)。
- 使用全局事件總線或事件總線插件：可以創(chuàng)建一個全局事件總線實例，或者使用第三方插件（如Vue Bus、Event Bus）來進行組件之間的通信，任何組件都可以通過事件的發(fā)布和訂閱來進行通信。
- 使用 r e f s 進行父子組件的直接訪問：父組件可以通過 r e f 屬性給子組件命名，在父組件中可以通過 refs進行父子組件的直接訪問：父組件可以通過ref屬性給子組件命名，在父組件中可以通過 refs進行父子組件的直接訪問：父組件可以通過ref屬性給子組件命名，在父組件中可以通過refs來直接訪問子組件的屬性和方法。
- 使用自定義事件：組件可以使用自定義事件系統(tǒng)，通過 o n 、 on、 on、emit、$off等方法來進行通信。
1.Props
如果props傳入的數(shù)據(jù)和子組件的data里面定義的數(shù)據(jù)一樣，那么會發(fā)生沖突，會以props的為主
如果props傳遞的是一個函數(shù),那么子組件使用props接受函數(shù)，然后調(diào)用并傳入數(shù)據(jù)，父組件也可以接收到子組件傳遞給父組件的數(shù)據(jù)。實現(xiàn)子組件給父組件傳遞數(shù)據(jù)
2. $emit 觸發(fā)自定義事件
父組件
<Children @add="cartAdd($event)" />
子組件
this.$emit('add', good)
3.ref
- 父組件在使用子組件的時候設置
ref - 父組件通過設置子組件
ref來獲取數(shù)據(jù)
父組件
<Children ref="foo" />
this.$refs.foo // 獲取子組件實例，通過子組件實例我們就能拿到對應的數(shù)據(jù)
接下來是兄弟組件傳遞數(shù)據(jù)
4.EventBus
創(chuàng)建一個中央事件總線EventBus
兄弟組件通過$emit觸發(fā)自定義事件，$emit第二個參數(shù)為傳遞的數(shù)值
另一個兄弟組件通過$on監(jiān)聽自定義事件文章來源：http://www.zghlxwxcb.cn/news/detail-456980.html
5.provide/inject
// A.vue
export default {
provide: {
name: '浪里行舟'
}
}
// B.vue
export default {
inject: ['name'],
mounted () {
console.log(this.name); // 浪里行舟
}
}
inject: [‘name’],
mounted () {
console.log(this.name); // 浪里行舟
}
}文章來源地址http://www.zghlxwxcb.cn/news/detail-456980.html
**provide 和 inject 綁定并不是可響應的。這是刻意為之的。然而，如果你傳入了一個可監(jiān)聽的對象，那么其對象的屬性還是可響應的**----vue官方文檔 所以，上面 A.vue 的 name 如果改變了，B.vue 的 this.name 是不會改變的，仍然是 浪里行舟。
到了這里，關(guān)于vue組件之間的通信都有哪些？的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
