$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觸發第一次emit觸發第一次emit觸發第一次 $on監聽不到

因為$emit 先於 $on 執行了，VUE並沒有儲存監聽事件，所以無法監聽到資料。

我這裡遇到的是在呼叫$emit的時候子元件並沒有建立，所以無法監聽到資料，子元件建立之後，便可以監聽到傳遞過來的資料

我的解決方法是在呼叫$emit的時候使用emit的時候使用emit的時候使用 $nextTick()方法

用法：將回調延遲到下次 DOM 更新迴圈之後執行。在修改資料之後立即使用它，然後等待 DOM 更新。它跟全域性方法 Vue.nextTick 一樣，不同的是回撥的 this 自動繫結到呼叫它的例項上。

new Vue({
 // ...
 methods: {
 // ...
 example: function () {
  // DOM 還沒有更新
  this.$nextTick(function () {
  // DOM 現在更新了
  bus.$emit('test',11)
  })
 }
 }
})

避免路由跳轉多個元件重複監聽，只需要在路由跳轉之前移除當前元件監聽事件即可：

beforeDestroy () {
 // 銷燬監聽事件
 this.$bus.$off('test')
 }

補充知識：元件之間使用this.$bus.$on傳值之前需要先this.$bus.$off登出事件

this.$bus是全域性變數

a、b是兩個父元件，c是子元件。

c頁面觸發事件：

this.$bus.$emit(event)

a、b頁面監聽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觸發第一次$on監聽不到問題就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支援我們。