$emit與emit與emit與 $on的用法

新建bus.js

import Vue from ’vue’

export const bus = new Vue()

引用bus.js

import {bus} from ’./bus’bus.$on(’test’, function (msg) { console.log(msg)}) bus.$emit(’test’, 11)

bus.$emit觸發(fā)第一次emit觸發(fā)第一次emit觸發(fā)第一次 $on監(jiān)聽(tīng)不到

因?yàn)?emit 先于 $on 執(zhí)行了，VUE并沒(méi)有儲(chǔ)存監(jiān)聽(tīng)事件，所以無(wú)法監(jiān)聽(tīng)到數(shù)據(jù)。

我這里遇到的是在調(diào)用$emit的時(shí)候子組件并沒(méi)有創(chuàng)建，所以無(wú)法監(jiān)聽(tīng)到數(shù)據(jù)，子組件創(chuàng)建之后，便可以監(jiān)聽(tīng)到傳遞過(guò)來(lái)的數(shù)據(jù)

我的解決方法是在調(diào)用$emit的時(shí)候使用emit的時(shí)候使用emit的時(shí)候使用 $nextTick()方法

用法：將回調(diào)延遲到下次 DOM 更新循環(huán)之后執(zhí)行。在修改數(shù)據(jù)之后立即使用它，然后等待 DOM 更新。它跟全局方法 Vue.nextTick 一樣，不同的是回調(diào)的 this 自動(dòng)綁定到調(diào)用它的實(shí)例上。

new Vue({ // ... methods: { // ... example: function () { // DOM 還沒(méi)有更新 this.$nextTick(function () { // DOM 現(xiàn)在更新了 bus.$emit(’test’, 11) }) } }})

避免路由跳轉(zhuǎn)多個(gè)組件重復(fù)監(jiān)聽(tīng)，只需要在路由跳轉(zhuǎn)之前移除當(dāng)前組件監(jiān)聽(tīng)事件即可：

beforeDestroy () { // 銷毀監(jiān)聽(tīng)事件 this.$bus.$off(’test’) }

補(bǔ)充知識(shí)：組件之間使用this.$bus.$on傳值之前需要先this.$bus.$off注銷事件

this.$bus是全局變量

a、b是兩個(gè)父組件，c是子組件。

c頁(yè)面觸發(fā)事件：

this.$bus.$emit(event)

a、b頁(yè)面監(jiān)聽(tīng)c組件的事件

pagea:

this.$bus.$on(event, () => { this.status = ’reserve’})

pageb:

this.$bus.$on(event, () => { this.status = ’buying’})

如果在調(diào)用了a頁(yè)面之后，再調(diào)用b頁(yè)面，回導(dǎo)致this.status是reserve而不是我們想要的buying。

正確寫(xiě)法：

pagea:

this.$bus.$off(event).$on(event, () => { this.status = ’reserve’})

pageb:

this.$bus.$off(event).$on(event, () => { this.status = ’buying’})

以上這篇解決vue bus.$emit觸發(fā)第一次$on監(jiān)聽(tīng)不到問(wèn)題就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持好吧啦網(wǎng)。