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