元件refs和bus事件匯流排

2021-10-24 13:38:11 字數 1298 閱讀 5366

refs

1.ref放到標籤上,拿到的是原生節點

**2.ref放在元件上,拿到的是元件物件 **

bus事件匯流排(實現兄弟元件的通訊)

** 1.建立**事件匯流排

2.乙個事件通過$emit觸發事件

3.乙個事件通過 $on監聽事件**

具體做法

1.新建立乙個 .js 檔案,比如 event-bus.js

2.在event-bus.js檔案裡寫下以下**

import vue from 『vue』

export const eventbus = new vue()

3.在負責觸發事件的兄弟元件1中,先引入eventbus

import from 「…/event-bus.js」;

再eventbus.$emit

click

changerelative ()
4.在負責監聽事件的兄弟元件2 中,先引入eventbus

import from 「…/event-bus.js」;

再eventbus.$on,在mounted宣告週期中進行監聽

children3

data()

},mounted())

}

5.移除事件監聽者

如果想移除事件的監聽,可以像下面這樣操作:

import from 『./event-bus.js』

eventbus.$off(『decreased』, {})

你也可以使用 eventbus.off

(『ke

rwin

』)來移

除應用內

所有對此

事件的監

聽。或者

直接呼叫

even

tbus

.off(『kerwin』) 來移除應用內所有對此事件的監聽。或者直接呼叫eventbus.

off(『k

erwi

n』)來

移除應用

內所有對

此事件的

監聽。或

者直接調

用eve

ntbu

s.off() 來移除所有事件頻道, 注意不需要新增任何引數 。

Vue中的事件匯流排 bus

在vue中,我們父子之間通訊簡單明瞭 父元件向子元件傳值 props,在父元件中,用 要傳遞過去的名字 要傳遞的值 在子元件中 使用props 接受即可 子元件向父元件傳值 emit.通過自定義方法,在子元件中,我們使用this.emit 方法名 引數 向父元件傳值 在父元件中,我們使用子元件傳遞過...

vue基礎之事件匯流排bus(非父子元件傳值通訊)

事件匯流排其實就是一種非父子關係的通訊方式 1 給vue的原型上掛載乙個vue例項 vue.prototype.bus newvue 2 傳送事件,傳送資料 this.bus.emit 事件名 資料 3 監聽事件,獲取資料 this.bus.on 事件名 資料 doctype html utf 8 ...

Vue系列狀態管理篇 Bus事件匯流排篇

原理 建立乙個空的vue例項,來作為互動的中介 新建乙個資料夾bus,在資料夾中新建乙個檔案 bus.js 也可以不要 在檔案 bus.js 建立以下 import vue from vue const bus new vue export default bus 3.在 main.js 匯入 bu...