vue組件通信的多種方法詳解
說起組件通信，可能大家耳熟能詳?shù)挠幸韵?種：
1. 父傳子
父組件通過自定義屬性給子組件傳值，子組件用props接收
2. 子傳父
父組件在子組件標(biāo)簽上自定義事件，子組件通過$emit來觸發(fā)自定義事件，并且可以傳遞參數(shù)
3. 非父子組件傳值
eventBus事件總線：
可通過eventBus進(jìn)行信息的發(fā)布與訂閱（創(chuàng)造一個(gè)都能訪問到的事件總線）
4. vuex
vuex是專為vue.js應(yīng)用程序開發(fā)的狀態(tài)管理模式，它采用集中式存儲(chǔ)管理程序的所有組件的狀態(tài)，解決多組件通信。不過多用于中大型項(xiàng)目，小型項(xiàng)目用它會(huì)顯得臃腫。
5. refs
通過添加ref和·$refs·配合，也可以很方便的獲取子組件，訪問調(diào)用子組件的屬性和方法
關(guān)于refs，我還另外單獨(dú)寫過一篇詳細(xì)用法的，refs的用法
除開以上5種，還有5種不那么常見的組件通信方法：
6. $children
父組件中·$children·返回的是一個(gè)組件集合，如果清楚知道子組件的順序，也可以使用下標(biāo)操作
7. $parent
子組件中this.$parent指向父組件，子組件無法直接修改父組件中的數(shù)據(jù)，可以通過this.$parent讓父組件自己去改
例如：
this.$parent.xxx=200
this.$parent.fn()
8. provide & inject
成對(duì)出現(xiàn)：provide和inject是成對(duì)出現(xiàn)的
作用：用于父組件向子孫組件傳遞數(shù)據(jù)
使用方法：
- provide在父組件中，返回要傳給下級(jí)的數(shù)據(jù)
- inject在需要使用這個(gè)數(shù)據(jù)的子孫組件中注入數(shù)據(jù)。（不論組件層次有多深）
9. $attrs
用于父組件給孫組件傳遞數(shù)據(jù)
10. $listeners
用于孫組件給父組件傳遞數(shù)據(jù)
總結(jié)
本篇文章就到這里了，希望能夠給你帶來幫助，也希望您能夠多多關(guān)注腳本之家的更多內(nèi)容!
相關(guān)文章
vue實(shí)現(xiàn)純前端表格滾動(dòng)分頁加載
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)純前端表格滾動(dòng)分頁加載，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-04-04
這篇文章主要介紹了vue?change阻止默認(rèn)事件問題,使用事件 @click.stop.native.prevent 解決 (使用@click.stop 或者 @click.prevent都無效，直接報(bào)錯(cuò)還阻止不了事件)，需要的朋友可以參考下2022-01-01
今天看了vuejs的組件，看到了prop組件，主要作用是在傳入數(shù)據(jù)的時(shí)候?qū)魅氲闹底雠袛?，今天小編通過一個(gè)小例子給大家分享VueJs組件prop驗(yàn)證簡單理解，感興趣的朋友一起看看吧2017-09-09
v-model 是 vue.js 提供的語法糖，根據(jù)不同的表單控件監(jiān)聽不同的事件，實(shí)現(xiàn)對(duì)表單控件的數(shù)據(jù)雙向綁定。這篇文章主要介紹了vue 表單輸入格式化中文輸入法異常,需要的朋友可以參考下2018-05-05
Vue2項(xiàng)目中對(duì)百度地圖的封裝使用詳解
近期項(xiàng)目需求相關(guān)地圖限定使用百度地圖,功能比較簡單,下面這篇文章主要給大家介紹了關(guān)于Vue2項(xiàng)目中對(duì)百度地圖的封裝使用的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-06-06
這篇文章主要為大家介紹了Vue的監(jiān)聽屬性，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2021-11-11
今天小編就為大家分享一篇vue slots 組件的組合/分發(fā)實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-09-09
在vue項(xiàng)目中利用popstate處理頁面返回的操作介紹
這篇文章主要介紹了在vue項(xiàng)目中利用popstate處理頁面返回的操作介紹，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-08-08
本篇內(nèi)容給大家總結(jié)了VUE的重要難點(diǎn)，并把代碼做了詳細(xì)分享，有興趣的朋友參考學(xué)習(xí)下。2018-03-03
Vue3+Vite+ElementPlus管理系統(tǒng)常見問題
本文記錄了使用Vue3+Vite+ElementPlus從0開始搭建一個(gè)前端工程會(huì)面臨的常見問題，沒有技術(shù)深度，但全都是解決實(shí)際問題的干貨，可以當(dāng)作是問題手冊(cè)以備后用，感興趣的朋友參考下2023-12-12