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

2021-10-12 16:16:53 字數 658 閱讀 9566

該方法需要先在main.js檔案中暴露出乙個例項,

也就是:

main.js檔案

export const eventbus = new vue()

然後在需要使用到的兄弟元件中引入這個main.js檔案

比如有componenta和componentb這兩個兄弟元件

在componentb中需要使用到componenta傳過來的變數

那麼在componenta中把需要傳值的變數通過eventbus.$emit傳過去

具體**如下:

首先引入main.js檔案中的定義的eventbus

import from "../main.js"

data()

},methods:

}

然後在componentb元件中使用eventbus.$on傳過來的變數

具體**如下:

首先還是先引入main.js

import from "../main.js"

data()

},注意:只能在mounted和created生命週期中接收

created())

},mounted())

}

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

同級 兄弟 元件間不能直接傳遞資料,需要建立乙個類似橋梁的載體去實現。1 定義乙個公共檔案public.js,建立位置工程src目錄下與main.js同級 內容是建立乙個空的vue例項 import vue from vue export default new vue 2 建立好以後,同級 兄弟 ...

VUE同級元件通訊

vue 除了常用的父子元件通訊之外,有時也會用到兄弟元件即同級元件之間的通訊 解決方案 例 元件a和元件b之間進行通訊,a控制b展示隱藏 1.先新建乙個js檔案,暫叫它為eventbus.js 檔名隨意 在內部註冊乙個空的vue 例項,作為兄弟元件之間的中轉站 import vue from vue...

vue同級元件通訊(只用vue)

vue元件通訊,有父子元件通訊和同級元件通訊兩種。在有vuex的時候,可以很輕易的通過全域性的 store來進行中轉,若只用vue自身進行同級通訊。例子中是ap1顯示me1資訊,在ap2中用按鈕改變ap1中的值。如下 id ap1 div id ap2 id btn2 click mejia1 a ...