解決vue bus.$emit觸發(fā)第一次$on監(jiān)聽不到問題
$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)聽不到
因?yàn)?emit 先于 $on 執(zhí)行了，VUE并沒有儲(chǔ)存監(jiān)聽事件，所以無法監(jiān)聽到數(shù)據(jù)。
我這里遇到的是在調(diào)用$emit的時(shí)候子組件并沒有創(chuàng)建，所以無法監(jiān)聽到數(shù)據(jù)，子組件創(chuàng)建之后，便可以監(jiān)聽到傳遞過來的數(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 還沒有更新
this.$nextTick(function () {
// DOM 現(xiàn)在更新了
bus.$emit('test', 11)
})
}
}
})
避免路由跳轉(zhuǎn)多個(gè)組件重復(fù)監(jiān)聽，只需要在路由跳轉(zhuǎn)之前移除當(dāng)前組件監(jiān)聽事件即可：
beforeDestroy () {
// 銷毀監(jiān)聽事件
this.$bus.$off('test')
}
補(bǔ)充知識(shí)：組件之間使用this.$bus.$on傳值之前需要先this.$bus.$off注銷事件
this.$bus是全局變量
a、b是兩個(gè)父組件，c是子組件。
c頁面觸發(fā)事件：
this.$bus.$emit(event)
a、b頁面監(jiān)聽c組件的事件
pagea:
this.$bus.$on(event, () => {
this.status = 'reserve'
})
pageb:
this.$bus.$on(event, () => {
this.status = 'buying'
})
如果在調(diào)用了a頁面之后，再調(diào)用b頁面，回導(dǎo)致this.status是reserve而不是我們想要的buying。
正確寫法：
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)聽不到問題就是小編分享給大家的全部內(nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了vue彈窗父子組件調(diào)用問題，本文通過示例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2022-08-08
vue.nextTick()與setTimeout的區(qū)別及說明
這篇文章主要介紹了vue.nextTick()與setTimeout的區(qū)別及說明,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
今天小編就為大家分享一篇vue初始化動(dòng)畫加載的實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-09-09
Vue3實(shí)現(xiàn)全局loading指令的示例詳解
這篇文章主要介紹了Vue3實(shí)現(xiàn)全局loading指令,本文通過示例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-06-06
vue+canvas實(shí)現(xiàn)移動(dòng)端手寫簽名
這篇文章主要為大家詳細(xì)介紹了vue+canvas實(shí)現(xiàn)移動(dòng)端手寫簽名，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-05-05
這篇文章主要介紹了vue directive定義全局和局部指令及指令簡寫,本文分步驟給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2018-11-11
這篇文章主要介紹了在vue項(xiàng)目中使用sass的配置方法,需要的朋友可以參考下2018-03-03
Vue2(三)實(shí)現(xiàn)子菜單展開收縮，帶動(dòng)畫效果實(shí)現(xiàn)方法
這篇文章主要介紹了vue實(shí)現(xiàn)收縮展開效果的實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
Vue+Element UI 實(shí)現(xiàn)視頻上傳功能
這篇文章主要介紹了Vue+Element UI 實(shí)現(xiàn)視頻上傳功能,前臺(tái)使用Vue+Element UI中的el-upload組件實(shí)現(xiàn)視頻上傳及進(jìn)度條展示，后臺(tái)提供視頻上傳API并返回URL，具體實(shí)現(xiàn)代碼及效果展示跟隨小編一起看看吧2022-01-01
vue-cli3+typescript初體驗(yàn)小結(jié)
這篇文章主要介紹了vue-cli3+typescript初體驗(yàn)小結(jié)，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2019-02-02