Vue中子元件之間的通訊

2021-08-30 19:44:46 字數 946 閱讀 3520

最近使用vue，學習了父元件向子元件以及子元件向父元件通訊的內容，但是在實際的應用中遇到了問題，如何進行同級元件之間的通訊呢，後來在網上找了相關資料，一般推薦用vuex和bus事件兩種方式，我選了bus匯流排，即**事件匯流排。

建立bus匯流排

新建乙個bus.js檔案（其實就是建立乙個公共的js檔案，專門用來傳遞訊息），檔案位置根據需要自定義，本文將該js檔案放置到src/components/common目錄下，具體內容為：

import vue from 'vue';


// 使用 event bus


const bus = new vue();


export default bus;
元件1引用bus匯流排 （傳送訊息）



按鈕  


import bus from './bus.js' 


export default 


},methods: 


}}
這裡的bus.$emit(『msg』, 『接收訊息了，大哥！！！』)**部分為傳送訊息，即向公共元件bus中發布乙個名稱為：msg，引數為「接收訊息了，大哥！！！」的事件。

3.元件2引用bus元件（接收訊息）



兄弟我接收的訊息是：}


import bus from './bus.js'


export default 


},mounted() )


}}
這裡的 bus.$on(『msg』, (e) => })為接收bus匯流排中的msg事件，其中引數為e為傳過來的引數，即「接收訊息了，大哥！！！」。最後在元件component2中顯示的內容為：

兄弟我接收的訊息是：接收訊息了，大哥！！！

還請各位多多指教，交流

vue元件之間通訊

個人blog，歡迎關注加收藏 元件之間通訊的幾種方式 1.父向子傳資料 props 2.子向父傳資料 emit 3.兄弟元件傳資料 a.事件匯流排 bus 在父元件的data中bus new vue 建立 事件匯流排 b.傳遞資料 this.roo t.bu s.root.bus.root.b us...

Vue元件之間通訊

vue元件傳值有以下幾種情況 父元件向子元件傳值 子元件向父元件傳值 兄弟元件之間傳值等 一 父元件向子元件傳值 傳值方式 props 動態傳遞值 子元件son 靜態傳值 父元件 子元件 son 1 prop的大小寫 html中的attribute名對大小寫不敏感，所以prop中的駝峰值需要等價於短...

vue元件之間的通訊

區域性元件 區域性元件必須手動掛載，不然無法生效。全劇元件 全域性元件不需要手動掛載，但不常用，盡量不要在全域性上掛載變數或者元件 影響瀏覽器效能 配合模板實現元件之間的巢狀。元件是vue.js最強大的功能之一，核心目標是擴充套件htnl元素，封裝可重用 元件可按照template,style,sc...