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...