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