解決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的props父傳子的示例代碼，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-05-05
這篇文章主要介紹了vue3封裝Element導(dǎo)航菜單的實例代碼,分為菜單數(shù)據(jù)格式示例,控制導(dǎo)航收縮的詳細代碼,本文通過實例代碼介紹的非常詳細,感興趣的朋友跟隨小編一起看看吧2024-03-03
這篇文章主要介紹了5分鐘學(xué)會Vue動畫效果(小結(jié)),小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-07-07
這篇文章主要給大家介紹了如何使用?Vue3?實現(xiàn)一個穿梭框效果,當(dāng)選中數(shù)據(jù),并且點擊相對應(yīng)的方向箭頭時,選中的數(shù)據(jù)會發(fā)送到對面,并且數(shù)據(jù)會保持正確的順序進行排列,文中有詳細的代碼講解,具有一定的參考價值,需要的朋友可以參考下2023-12-12
前端實現(xiàn)pdf預(yù)覽功能的全過程(基于vue)
這篇文章主要給大家介紹了關(guān)于前端實現(xiàn)pdf預(yù)覽功能的相關(guān)資料,前端實現(xiàn)預(yù)覽最好的效果還是PDF,不會出現(xiàn)一些文字錯亂和亂碼的問題,文中通過代碼介紹的非常詳細,需要的朋友可以參考下2023-09-09
在Vue3中,公共組件的main.js文件扮演著非常重要的角色,它的作用主要體現(xiàn)在：注冊全局組件、引入公共樣式、引入Vue、引入組件、創(chuàng)建Vue實例、掛載實例,本文將圍繞Vue3公共組件的main.js文件進行詳細的闡述,包括其作用、常用代碼等方面2023-08-08
Element InputNumber 計數(shù)器的實現(xiàn)示例
這篇文章主要介紹了Element InputNumber 計數(shù)器的實現(xiàn)示例，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-08-08
本篇文章主要介紹了詳解VUE2.X過濾器的使用方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-01-01
Vue 使用formData方式向后臺發(fā)送數(shù)據(jù)的實現(xiàn)
這篇文章主要介紹了Vue 使用formData方式向后臺發(fā)送數(shù)據(jù)的實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
這篇文章主要介紹了vue項目打包部署到服務(wù)器的方法示例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-08-08