Vue同級(兄弟)元件間資料的傳遞

2021-09-13 00:03:44 字數 563 閱讀 9098

同級(兄弟)元件間不能直接傳遞資料,需要建立乙個類似橋梁的載體去實現。

1、定義乙個公共檔案public.js,建立位置工程src目錄下與main.js同級(**內容是建立乙個空的vue例項):

import vue from 'vue'

export default new vue()

2、建立好以後,同級(兄弟)元件分別引入public.js這個檔案:

import public from '../public.js'
3、例如現在有a.vueb.vue兩個同級(兄弟)元件,假設a.vue元件傳送資料,通過$emit將事件和引數』傳遞』給b.vue(實際上是傳遞資料到public.js內):

price(newprice)
4、在b.vue元件裡接收資料,通過$on將事件和資料從a.vue接收過來:

public.$on("xx", val=> );
感謝分享

vue元件間通訊 資料傳遞(父子元件,同級元件)

總結一下對vue元件通訊的理解和使用。子元件 page1.vue 子元件 page2.vue 單價 降價1元 數量 總金額 元 剩餘金額 元import page1 from components page1 components 此處的price則是傳遞給子元件的值 props 單價 單價 降價1...

vue實現兄弟元件或者同級元件傳值方法

該方法需要先在main.js檔案中暴露出乙個例項,也就是 main.js檔案 export const eventbus new vue 然後在需要使用到的兄弟元件中引入這個main.js檔案 比如有componenta和componentb這兩個兄弟元件 在componentb中需要使用到comp...

VUE 元件間資料互動

元件通過props來接收傳遞過來的值vue.component a item 父元件通過屬性傳遞值給子元件 父元件的值 a item 靜態的值 n a item 動態的值 注意 在props中使用駝峰命名時,在末班中需要用短橫線方式,字串模板中沒有限制。例 vue.component a item ...