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