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. 父組件中：通過(guò)需要向外傳值的子組件標(biāo)簽的標(biāo)志符，在自定義的方法中將值拿 到，并存起來(lái)，然后再用 ：A=存值得屬性這種格式 傳給另外的子組件；
c. 另外的子組件中使用props[‘A’],將傳過(guò)來(lái)的值拿到，并且在需要用的地方使用，
如果在methods中使用的A的話，其實(shí)和使用data中的屬性一樣，也是用this.xx 這種格式。
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue+canvas如何實(shí)現(xiàn)根據(jù)數(shù)據(jù)展示不同高度,不同漸變顏色的長(zhǎng)方體效果
這篇文章主要介紹了vue+canvas如何實(shí)現(xiàn)根據(jù)數(shù)據(jù)展示不同高度,不同漸變顏色的長(zhǎng)方體效果,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-09-09
vue3在單個(gè)組件中實(shí)現(xiàn)類似mixin的事件調(diào)用
這篇文章主要為大家詳細(xì)介紹了vue3如何在單個(gè)組件中實(shí)現(xiàn)類似mixin的事件調(diào)用,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-01-01
avue-crud多級(jí)復(fù)雜的動(dòng)態(tài)表頭的實(shí)現(xiàn)示例
Avue.js?是基于現(xiàn)有的element-ui庫(kù)進(jìn)行的二次封裝，本文主要介紹了avue-crud多級(jí)復(fù)雜的動(dòng)態(tài)表頭，文中通過(guò)示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-12-12
laravel5.4+vue+element簡(jiǎn)單搭建的示例代碼
本篇文章主要介紹了laravel5.4+vue+element簡(jiǎn)單搭建的示例代碼，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-08-08
本篇文章主要介紹了vue2.0之多頁(yè)面的開發(fā)的示例，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-01-01
vue-seamless-scroll無(wú)縫滾動(dòng)組件使用方法詳解
這篇文章主要為大家詳細(xì)介紹了vue-seamless-scroll無(wú)縫滾動(dòng)組件的使用方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-04-04
Vite?vue3多頁(yè)面入口打包以及部署踩坑實(shí)戰(zhàn)
因?yàn)槲覀児镜捻?xiàng)目是多頁(yè)面應(yīng)用,不同于傳統(tǒng)單頁(yè)面應(yīng)用,一個(gè)包就可以了,下面這篇文章主要給大家介紹了關(guān)于Vite?vue3多頁(yè)面入口打包以及部署踩坑的相關(guān)資料,需要的朋友可以參考下2022-05-05
在Echarts圖中給坐標(biāo)軸加一個(gè)標(biāo)識(shí)線markLine
這篇文章主要介紹了在Echarts圖中給坐標(biāo)軸加一個(gè)標(biāo)識(shí)線markLine，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-07-07
本文介紹了如何使用Vite快速搭建Vue項(xiàng)目,強(qiáng)調(diào)Vite對(duì)Node.js版本有最低要求（>=12.0.0）,提供了環(huán)境準(zhǔn)備、安裝步驟和啟動(dòng)指南,旨在幫助開發(fā)者高效啟動(dòng)Vue項(xiàng)目2024-10-10
Vue.js中集成Socket.IO實(shí)現(xiàn)實(shí)時(shí)聊天功能
隨著 Web 技術(shù)的發(fā)展,實(shí)時(shí)通信成為現(xiàn)代 Web 應(yīng)用的重要組成部分,Socket.IO 是一個(gè)流行的庫(kù),支持及時(shí)、雙向與基于事件的通信,適用于各種平臺(tái)和設(shè)備,本文將介紹如何在 Vue.js 項(xiàng)目中集成 Socket.IO,實(shí)現(xiàn)一個(gè)簡(jiǎn)單的實(shí)時(shí)聊天應(yīng)用,需要的朋友可以參考下2024-12-12