解決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)聽到數據。
我這里遇到的是在調用$emit的時候子組件并沒有創(chuàng)建，所以無法監(jiān)聽到數據，子組件創(chuàng)建之后，便可以監(jiān)聽到傳遞過來的數據
我的解決方法是在調用$emit的時候使用emit的時候使用emit的時候使用 $nextTick()方法
用法：將回調延遲到下次 DOM 更新循環(huán)之后執(zhí)行。在修改數據之后立即使用它，然后等待 DOM 更新。它跟全局方法 Vue.nextTick 一樣，不同的是回調的 this 自動綁定到調用它的實例上。
new Vue({
// ...
methods: {
// ...
example: function () {
// DOM 還沒有更新
this.$nextTick(function () {
// DOM 現在更新了
bus.$emit('test', 11)
})
}
}
})
避免路由跳轉多個組件重復監(jiān)聽，只需要在路由跳轉之前移除當前組件監(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'
})
如果在調用了a頁面之后，再調用b頁面，回導致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)聽不到問題就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
這篇文章主要介紹了Vue的props父傳子的示例代碼，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-05-05
這篇文章主要介紹了vue3封裝Element導航菜單的實例代碼,分為菜單數據格式示例,控制導航收縮的詳細代碼,本文通過實例代碼介紹的非常詳細,感興趣的朋友跟隨小編一起看看吧2024-03-03
這篇文章主要介紹了5分鐘學會Vue動畫效果(小結),小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-07-07
這篇文章主要給大家介紹了如何使用?Vue3?實現一個穿梭框效果,當選中數據,并且點擊相對應的方向箭頭時,選中的數據會發(fā)送到對面,并且數據會保持正確的順序進行排列,文中有詳細的代碼講解,具有一定的參考價值,需要的朋友可以參考下2023-12-12
這篇文章主要給大家介紹了關于前端實現pdf預覽功能的相關資料,前端實現預覽最好的效果還是PDF,不會出現一些文字錯亂和亂碼的問題,文中通過代碼介紹的非常詳細,需要的朋友可以參考下2023-09-09
在Vue3中,公共組件的main.js文件扮演著非常重要的角色,它的作用主要體現在：注冊全局組件、引入公共樣式、引入Vue、引入組件、創(chuàng)建Vue實例、掛載實例,本文將圍繞Vue3公共組件的main.js文件進行詳細的闡述,包括其作用、常用代碼等方面2023-08-08
這篇文章主要介紹了Element InputNumber 計數器的實現示例，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-08-08
本篇文章主要介紹了詳解VUE2.X過濾器的使用方法，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-01-01
Vue 使用formData方式向后臺發(fā)送數據的實現
這篇文章主要介紹了Vue 使用formData方式向后臺發(fā)送數據的實現，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-04-04
這篇文章主要介紹了vue項目打包部署到服務器的方法示例，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-08-08