vue組件通信的多種方法詳解
說起組件通信，可能大家耳熟能詳?shù)挠幸韵?種：
1. 父傳子
父組件通過自定義屬性給子組件傳值，子組件用props接收
2. 子傳父
父組件在子組件標(biāo)簽上自定義事件，子組件通過$emit來觸發(fā)自定義事件，并且可以傳遞參數(shù)
3. 非父子組件傳值
eventBus事件總線：
可通過eventBus進(jìn)行信息的發(fā)布與訂閱（創(chuàng)造一個都能訪問到的事件總線）
4. vuex
vuex是專為vue.js應(yīng)用程序開發(fā)的狀態(tài)管理模式，它采用集中式存儲管理程序的所有組件的狀態(tài)，解決多組件通信。不過多用于中大型項目，小型項目用它會顯得臃腫。
5. refs
通過添加ref和·$refs·配合，也可以很方便的獲取子組件，訪問調(diào)用子組件的屬性和方法
關(guān)于refs，我還另外單獨寫過一篇詳細(xì)用法的，refs的用法
除開以上5種，還有5種不那么常見的組件通信方法：
6. $children
父組件中·$children·返回的是一個組件集合，如果清楚知道子組件的順序，也可以使用下標(biāo)操作
7. $parent
子組件中this.$parent指向父組件，子組件無法直接修改父組件中的數(shù)據(jù)，可以通過this.$parent讓父組件自己去改
例如：
this.$parent.xxx=200
this.$parent.fn()
8. provide & inject
成對出現(xiàn)：provide和inject是成對出現(xiàn)的
作用：用于父組件向子孫組件傳遞數(shù)據(jù)
使用方法：
- provide在父組件中，返回要傳給下級的數(shù)據(jù)
- inject在需要使用這個數(shù)據(jù)的子孫組件中注入數(shù)據(jù)。（不論組件層次有多深）
9. $attrs
用于父組件給孫組件傳遞數(shù)據(jù)
10. $listeners
用于孫組件給父組件傳遞數(shù)據(jù)
總結(jié)
本篇文章就到這里了，希望能夠給你帶來幫助，也希望您能夠多多關(guān)注腳本之家的更多內(nèi)容!
相關(guān)文章
這篇文章主要介紹了針對Vue路由history模式下Nginx后臺配置操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-10-10
vue組件中節(jié)流函數(shù)的失效的原因和解決方法
這篇文章主要介紹了vue組件中節(jié)流函數(shù)的失效和解決方法，幫助大家更好的理解和學(xué)習(xí)vue框架，感興趣的朋友可以了解下2020-12-12
這篇文章主要為大家介紹了vue3實現(xiàn)數(shù)字滾動特效實例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-09-09
使用live-server快速搭建本地服務(wù)器+自動刷新的方法
下面小編就為大家分享一篇使用live-server快速搭建本地服務(wù)器+自動刷新的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03
Vue.js實現(xiàn)表格動態(tài)增加刪除的方法（附源碼下載）
Vue.js通過簡潔的API提供高效的數(shù)據(jù)綁定和靈活的組件系統(tǒng)。在前端紛繁復(fù)雜的生態(tài)中，Vue.js有幸受到一定程度的關(guān)注，下面這篇文章主要給介紹了Vue.js實現(xiàn)表格動態(tài)增加刪除的方法實例，文末提供了源碼下載，需要的朋友可以參考借鑒。2017-01-01
VUE +Element 實現(xiàn)多個字段值拼接功能
這篇文章主要介紹了VUE +Element 實現(xiàn)多個字段值拼接,本文通過實例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-04-04
這篇文章主要為大家介紹了Vue3通用API功能示例剖析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-05-05
這篇文章主要介紹了在vue項目中使用百度地圖的方法，本文通過實例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒借鑒價值,需要的朋友可以參考下2018-06-06
這篇文章主要介紹了bing Map 在vue項目中的使用,需要的朋友可以參考下2018-04-04
這篇文章主要為大家介紹了npm run dev報錯信息及解決方法,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-09-09