Vue中为什么bus.$emit第一次触发$on监听会失效？

本文共计551个文字，预计阅读时间需要3分钟。

使用 `$emit` 和 `$on` 的方法如下：

javascriptimport Vue from 'vue';export const bus=new Vue();

// 引用 bus.jsimport { bus } from './bus';

// 监听 'test' 事件bus.$on('test', function(msg) { console.log(msg);});

// 触发 'test' 事件，传递参数 11bus.$emit('test', 11);

// bus.$emit 触发第一次 emit 事件

$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监听不到问题就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持易盾网络。