vue中兄弟組件傳值的兩種方式小結(jié)
本demo主要是為了演示vue項目中兄弟組件之間的傳值，這里我演示了兩種方式：
- a. bus總線傳值；
- b. 我自己一般把它當成常規(guī)的傳值(其實也就是子組件A傳父組件，父組件再傳子組 件B)
下邊開始本次demo的編寫：
一. bus總線傳值的使用
在項目中創(chuàng)建一個單獨的eventBus.js文件
該js文件的內(nèi)容很簡單，就是暴露一個vue實例而已。
有人喜歡在main.js全局引入該js文件，我一般在需要使用到組件中引入。
創(chuàng)建相關(guān)組件：
父組件中注冊并使用子組件：
分別在子組件one和two中引入eventBus.js
one組件向two組件傳值：(傳值使用$emit)
two組件接收到one組件的值：(接收值使用$on)
到這里其實使用bus總線實現(xiàn)兄弟組件之間的傳值已經(jīng)完成。
二. 使用常規(guī)的傳值：(子傳父，父再傳子)
新建組件three和four，在父組件注冊并使用：
three組件想要傳值給它的兄弟組件four：
父組件監(jiān)聽到three組件要傳給four組件的值：
接收到three組件的值后，傳給four：
four組件接收父組件傳達的值：
到這里常規(guī)的兄弟組件傳值也完成。
總結(jié)
a. 其實就是使用 this.$emit(‘標志符’,‘要傳遞的值’) 實現(xiàn)將該組件傳給父組件；
b. 父組件中：通過需要向外傳值的子組件標簽的標志符，在自定義的方法中將值拿 到，并存起來，然后再用 ：A=存值得屬性這種格式 傳給另外的子組件；
c. 另外的子組件中使用props[‘A’],將傳過來的值拿到，并且在需要用的地方使用，
如果在methods中使用的A的話，其實和使用data中的屬性一樣，也是用this.xx 這種格式。
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
Vue中的v-for循環(huán)key屬性注意事項小結(jié)
這篇文章主要介紹了Vue中的v-for循環(huán)key屬性注意事項小結(jié),非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下2018-08-08
Vue?Echarts報錯Initialize?failed:?invalid?dom解決方法
最近因為工作需要,用到了ECharts做圖表,也遇到了問題,就來跟大家總結(jié)分享一下,下面這篇文章主要給大家介紹了關(guān)于Vue?Echarts報錯Initialize?failed:?invalid?dom的解決方法,需要的朋友可以參考下2023-06-06
本篇文章主要介紹了詳解VueJs前后端分離跨域問題，詳細介紹了在項目內(nèi)設(shè)置代理（proxyTable）的方式來解決跨域問題，有興趣的可以了解一下2017-05-05
vue Treeselect 樹形下拉框:獲取選中節(jié)點的ids和lables操作
這篇文章主要介紹了vue Treeselect 樹形下拉框:獲取選中節(jié)點的ids和lables操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-08-08
Vue為了增加列表渲染的功能，增加了一組觀察數(shù)組的方法，而且可以顯示一個數(shù)組的過濾或排序的副本。本文將詳細介紹Vue數(shù)組更新及過濾排序2017-08-08
本篇文章主要介紹了vue使用Axios做ajax請求詳解，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-06-06
這篇文章主要為大家詳細介紹了vue+F2生成折線圖的方法，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-04-04
vue實現(xiàn)畫筆回放canvas轉(zhuǎn)視頻播放功能
這篇文章主要介紹了vue實現(xiàn)畫筆回放，canvas轉(zhuǎn)視頻播放功能,本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2024-01-01
這篇文章主要介紹了Vue3項目中引用TS語法的實例講解，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-05-05
這篇文章主要介紹了vite+vue3項目中svg圖標組件封裝的過程,本文通過實例代碼給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友參考下吧2024-03-03