vue 元件通訊之「兄弟元件之間的傳值」

2021-10-12 06:49:35 字數 1005 閱讀 1617

一、事件車

1、兄弟元件之間傳值要借助事件車,通過事件車的方式傳遞資料。

2、**事件匯流排(通俗講就是:eventbus事件車)的實質就是建立乙個vue例項,通過乙個空的vue例項作為橋梁實現vue元件間的通訊。它是實現非父子元件通訊的一種解決方案。

3、作用:實現非父子元件之間的資料傳遞。

4、傳遞資料方,通過乙個事件觸發bus.$emit(方法名,傳遞的資料)。

5、接收資料方

接收資料方,通過mounted())

}

二、例項如下

1、建立事件車檔案,eventbus.js

eventbus.js

import vue from 'vue'

export default new vue()

2、我們需要做的是將 componenta 中的資料傳輸到componentb中,componenta與componentb為兄弟元件!

傳輸方: componenta

//1、引入 eventbus.js 檔案

import eventbus from '../eventbus.js'

//2、 在 methods 中定義函式

export de****t

}}

接收方:componentb

//1、引入 eventbus.js 檔案

import eventbus from '../eventbus.js'

//2、 在 created 生命週期中接收

export de****t )

}}

注意:如果 $on 多次觸發,解決辦法就是在 beforedestroy 或 destroy 中將事件銷毀,使用 $off()。

beforedestroy () ,
還有其它的兩種方法,分別是 vuex、和 子 -> 父 -> 子。

vue元件通訊(父子之間,兄弟之間)

1 在父元件中引入需要通訊的子元件import son from components son 2 在父元件的components中註冊該子元件components 3 在父元件的template中使用子元件4 將需要傳遞給子元件的值通過v bind 此處的price則是傳遞給子元件的值5 在對應的...

vue之元件通訊方式 兄弟元件

今天回顧一下vue元件中兄弟元件如何實現通訊 在兄弟元件之間的通訊,可以採用關係鏈和ref鏈去使用,解決兄弟之間通訊問題。html布局 我是哥哥 打弟弟 我是弟弟 嗚嗚嗚嗚嗚嗚 js vue.component big brother vue.component littel brother new...

vue父子兄弟之間的元件通訊

一.父子之間的通訊 1.父元件 子元件 props down 通過屬性 步驟1 父元件在呼叫子元件時傳值 步驟2 子元件通過props得到父元件的傳過來的資料 vue.component son 通過 parent 直接在子元件中通過this.parent得到呼叫子元件的父元件 2 子元件 父元件 ...