问题描述:只要页面没有强制刷新,存在组件切换,bus.$on方法会被多次绑定,造成事件多次触发

解决办法一:在每次调用方法前先解绑事件( bus.$off ),然后在重新绑定( bus.$on )

bus.$off('pagechangep'); //先解绑,不然会多次出发
bus.$on('pagechangep',function(i){
that.publishpageTo(i);
});

解决办法二:注册的总线事件(Bus)要在组件销毁时(beforeDestroy/destroyed)卸载,否则会多次挂载,造成触发一次但多个响应的情况

beforeDestroy () {
bus.$off("backUpLevel");
}

vue中bus.$on事件被多次绑定的更多相关文章

  1. 记一笔vue中的中央事件总线的问题,以及解决方案

    代码结构:首先HeaderNav组件是被单独拎出来的,router-view中就对应了内容组件,由于有时候i有的界面的header内容是不一样的,因此要用到兄弟组件的相互通信,这个时候我首先选择了bu ...

  2. Vue 中Bus使用

    使用:兄弟组件之间传值: 安装: npm install vue-bus 在main.js 中引入vuebus: import Vue from 'vue'; import VueBus from ' ...

  3. vue中使用触摸事件,上滑,下滑,等

    第一步,下载一个包 npm install kim-vue-touch -s 在当前项目中下载包 第二部 import vueTouch from 'kim-vue-touch' Vue.use(vu ...

  4. vue中click阻止事件冒泡,防止触发另一个事件

    在使用el-upload组件时,在其中放置了一个删除按钮的图片. 当点击图片,本想只删除上传的视频,但是意外触发了el-upload中的事件 解决办法:用stop,结果只删除当前预览,不触发上传事件. ...

  5. vue中把一个事件绑定到子组件上

    官网上是这样描述的 你可能有很多次想要在一个组件的根元素上直接监听一个原生事件.这时,你可以使用 v-on的 .native 修饰符 父组件App.vue <template> <d ...

  6. vue中触发键盘事件的两种方法和如何自定义键位事件,完整代码!

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. VUE中v-on:click事件中获取当前dom元素

    在开发中总是忘记, 特意在此记录 关键字:   $event     <div class="bed" v-on:click="updateBed(index,$e ...

  8. Vue中的button事件

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  9. vue中的键盘事件

    @keydown(键盘按下时触发),@keypress(键盘按住时触发),@keyup(键盘弹起) 获取按键的键码 e.keyCode @keyup.13     按回车键 @keyup.enter ...

随机推荐

  1. docker在mac下安装及配置阿里云镜像加速

    安装 brew cask install docker 配置 关于阿里云加速地址,下面会有详细说明 阿里云官方镜像加速 官方文档:https://help.aliyun.com/document_de ...

  2. 用js方式取得接口里面json数据的key和value值

    大家在实际操作中难免遇到对接口的问题,想必对一些小白来说取得里面想要是数据也是很是头疼,那么接下来我会结合接口实际情况教大家怎么取得里面相应的数据 接口数据例如:(数据为 模拟数据,json格式) { ...

  3. new angular 项目的工作区配置文件和应用源文件

    1.工作区配置文件 每个工作空间中的所有项目共享同一个 CLI 配置环境 .该工作空间的顶层包含着全工作空间级的配置文件.根应用的配置文件以及一些包含根应用的源文件和测试文件的子文件夹. 工作空间配置 ...

  4. 用ant打包

    Eclipse 内置了 Ant . Ant 是一种类似于批处理程序的软件包,它主要繁琐的工作是编写和调试自动处理脚本(一个 XML 文件),但只要有了这个脚本,我们就可以一键完成所有的设定工作. 本节 ...

  5. centos 7 安装 Oracle 12c

    #!/bin/bash #!/usr/bin/expect -f #/etc/sysctl.conf --bash-srcipts-- echo 'net.ipv6.conf.all.disable_ ...

  6. 小米Air安装Arch Linux之图形界面配置(Gnome 和 sway)持续更新中……

    0. 前言 上一篇文章简单讲述了在小米Air上安装Arch Linux的经验,但是安装完后基本系统后,还需要额外的配置才能进到日常使用.下文简单列举一些步骤. 1. 参考网站 主要还是参考ARCH W ...

  7. 小程序UI设计(3)-符合视觉规范-列表视觉规范

    上一篇我们介绍了字体规范,此贴介绍一下在列表中如何组合使用.下图是微信官方的要求   在工具中通过拖拽组件可以制作出一样的效果拖拽一个WViewRow.这个组件是小程序的view,flex-direc ...

  8. Addthis分享插件后url乱码的解决办法

    Addthis分享插件安装后,有时候URL后面会出现类似#.VB4mxhbjtnQ的一串乱码的乱码,作用是用来追踪客户客户,但是给客户的印象会以为木马中毒之类的 http://localhost/mi ...

  9. js获取前几个月的具体日期

    // 往前数monthNum月份,不能往后数monthNum getPreMonthDay("2018-12-28",20) // 往前数monthNum月份,不能往后数month ...

  10. 使用jvisualvm远程监控tomcat(阿里云ECS)

    写在前面:  使用jvisualvm远程监控tomcat(阿里云ECS),连接是报错:service:jmx:rmi:////jndi/rmi:IP:端口//  连接到 IP:端口,网上找了很多资料, ...