解决vue bus.$emit触发第一次$on监听不到问题

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

赞 (0)

相关推荐

  • 详解vue 路由跳转四种方式 (带参数)

    1.  router-link 1. 不带参数 <router-link :to="{name:'home'}"> <router-link :to="{path:'/home'}"> //name,path都行, 建议用name // 注意:router-link中链接如果是'/'开始就是从根路由开始,如果开始不带'/',则从当前路由开始. 2.带参数 <router-link :to="{name:'home', para

  • 解决Vue使用bus总线时,第一次路由跳转时数据没成功传递问题

    bus总线是vue中路由跳转传递数据的常用方法,适用于传递数据不多的情况,但是在使用的过程中发现,bus总线在第一次路由跳转的时候总是不能够成功传递需要传递的数据.检查bus的配置以及调用方法,均没有出错,错就错在没有理解Vue的生命周期!!! 我们知道bus的$on的监听应该位于$emit之前,如果在emit之前没有创建监听事件,那么肯定是得不到需要的数据.因此,我通过两个页面来了解路由跳转时两个页面的生命周期,下面给出其中一个页面的部分代码: //页面1 beforeCreate () {

  • vue路由传参页面刷新参数丢失问题解决方案

    最近项目中涉及到跨页面传参数和后台进行数据交互,看到需求之后第一反应就是用路由传参来解决:Vue中给我们提供了三种路由传参方式,下面我们一个一个的来看一下: 方法一:params传参: this.$router.push({ name:"admin", //这里的params是一个对象,id是属性名,item.id是值(可以从当前组件或者Vue实例上直接取) params:{id:item.id} }) //这个组件对应的路由配置 { //组件路径 path: '/admin', //

  • vue路由跳转传递参数的方式总结

    日常业务中,路由跳转的同时传递参数是比较常见的,传参的方式有三种: 1)通过动态路由方式 //路由配置文件中 配置动态路由 { path: '/detail/:id', name: 'Detail', component: Detail } //跳转时页面 var id = 1; this.$router.push('/detail/' + id) //跳转后页面获取参数 this.$route.params.id 2)通过query属性传值 //路由配置文件中 { path: '/detail

  • 解决vue bus.$emit触发第一次$on监听不到问题

    $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.js父组件$on无法监听子组件$emit触发事件的问题

    最近学习vuejs看例子中用$on无法监听子组件$emit触发事件: 使用版本 vue.js 2.2.5 参考文献 1.vuejs API 2.解决实例 问题分析 1.之前写的自定义组件事件触发为this.$emit("myclick",this.todo.text);,这样this指的是todo-item的每一项,而最后vm.$on监听的是app组件,也就出说监听的是父节点,而触发的是子节点,故监听不到这个事件的. 解决思路 1.将触发事件放在父节点上触发,就可以监听到触发的事件了,

  • Vue中watch监听第一次不触发、深度监听问题

    目录 watch监听第一次不触发.深度监听 第一次不触发 例如 vue watch使用无效问题 watch监听第一次不触发.深度监听 第一次不触发 handler:其值是一个回调函数.即监听到变化时应该执行的函数. deep:其值是true或false:确认是否深入监听.(一般监听时是不能监听到对象属性值的变化的,数组的值变化可以听到.) immediate:其值是true或false:确认是否以当前的初始值执行handler的函数 例如 我将父组件中的WatchId传递到这个子组件页面我要根据

  • vue双击事件2.0事件监听(点击-双击-鼠标事件)和事件修饰符操作

    Vue 事件处理方法 可以用 v-on 指令监听 DOM 事件,并在触发时运行一些 JavaScript 代码. v-on:click 单击事件 <button class=" btn btn-info" v-on:click="add(1)"> + + </button> <button class=" btn btn-danger " v-on:click="subtract(1)">

  • 解决Vue2.0 watch对象属性变化监听不到的问题

    问题 很早之前就遇到一个问题,父组件向子组件传值,子组件监听传入对象的某个属性.发现子组件使用deep watch都不能观察到对象中属性的变化,今天终于找到为啥出现这种问题和解决办法了. 解决 为啥出现这种问题?受 ES5 的限制,Vue.js 不能检测到对象属性的添加或删除. 请参照https://v1-cn.vuejs.org/guide/reactivity.html 解决方式: 通过vue的this.$set(object, key, value)方法 通过Object.assign()

  • 使用vue.js在页面内组件监听scroll事件的方法

    思路:scroll在哪儿个组件内,就在获取那个dom元素.网上好多思路是 window.addEventListener("scroll", function(){ console.log('scrolling'); }); 这是监听不到的!如果你整个网页可以滑动,或许还可以试试! 对于像我这样,只在页面的内的一个div内要监听的. 实现代码如下: 第一步:滑动的组件外层的div加 ref="viewBox" 为了通过$refs获取dom元素 <!--设备列表

  • vue select选择框数据变化监听方法

    1.使用v-model在select标签上进行数据双向绑定, 2.在data里边添加val:' ', 3.最后就是监听事件的写法,写在methods之外. 附加:(以下图片借鉴他人,非原创) 以上这篇vue select选择框数据变化监听方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们.

  • vue.js过滤器+ajax实现事件监听及后台php数据交互实例

    vue.js过滤器+ajax实现事件监听及后台php数据交互实例

    本文实例讲述了vue.js过滤器+ajax实现事件监听及后台php数据交互.分享给大家供大家参考,具体如下: 在vue.js开发时,数据可以使用jquery和vue-resource来获取数据.在获取数据时,一定需要给一个数据初始值. index.html: <!doctype html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title> v

  • vue+导航锚点联动-滚动监听和点击平滑滚动跳转实例

    最终效果如下:(注意需要做锚点联动的部分并不在页面的顶部而是页面的某个div内)-chrome 完成这个功能需要注意: 1.点击导航平滑滚动到导航内容处 2.div内滚动时当前导航需要做响应 代码如下: 1.html结构(因为从项目里截取代码数据内容就不贴出来了,不算难点,这个可以根据自己的项目进行调整,相应的方法和类名别弄错就行) <div class="all-title"> 全部应用 <p class="fr"> <span v-

  • Vue项目中数据的深度监听或对象属性的监听实例

    众所周知,vue项目中对数据的监听,提供了一个很好的钩子watch,watch可以极其方便的监听我们常用数据类型值的变化,但通常当我们想监听一个对象中,某个属性值的变化时,很难达到我们预期的效果.根据vue的文档,不难发现,使用数据的深度监听来达到这一效果.具体实现如下: watch: { evlist: { handler(val, oldVal) { this.isTeam = val.projectParty; this.pjtid = val.pjtid; this.isFinish =

随机推荐