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