问题描述:只要页面没有强制刷新,存在组件切换,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. IntelliJ IDEA 复杂的重构技巧

    IntelliJ IDEA 复杂的重构技巧(二) 转载 上次我说了一些 "复杂的重构技巧" ,讲的是一些使用 IntelliJ 的简单功能实现复杂的重构需求的技巧. 看到大家的反响 ...

  2. redis 学习(15)-- GEO

    GEO GEO 简介 Redis 3.2添加新特性 功能:存储经纬度.计算两地距离.范围计算等 基于ZSet实现 删除操作使用 zrem key member GEO 相关命令 1.geoadd ke ...

  3. 剑指offer-构建乘积数组-数组-python

    题目描述 给定一个数组A[0,1,...,n-1],请构建一个数组B[0,1,...,n-1],其中B中的元素B[i]=A[0]*A[1]*...*A[i-1]*A[i+1]*...*A[n-1].不 ...

  4. C# 文件基本操作

    概括的说,File,FileInfo,FileStream是用于文件 I/O 的类,StreamReader是用于从流读取和写入流的类,使用之前都需using System.IO. 先定义一个TXT文 ...

  5. Hadoop学习之 HIVE 多用户模式安装

    一.启动hadoop 集群 1.启动zookeeper 集群   zkServer.sh start 2.在master.hadoop 机器上 ./start-all.sh 由于 start-all命 ...

  6. 帝国cms 反馈

    <form name='feedback' method='post' enctype='multipart/form-data' action='/e/enews/index.php' ons ...

  7. JavaScript学习基础

    基本语法    JavaScript语法和Java语言类似,每个语句以 : 结束,语句块用 {...}包起来.JavaScript并不强制要求在每个语句的结尾加: ,但是建议都加上,不给自己找麻烦.  ...

  8. Ubuntu18.10中pip install mysqlclient 出现EnvironmentError: mysql_config not found错误

    Complete output from command python setup.py egg_info: sh: 1: mysql_config: not found Traceback (mos ...

  9. vue-transition实现加入购物车效果及其他动画效果实现

    vue提供了<transition></transition>和<transition-group></transition-group>实现元素状态的 ...

  10. centos7网络配置脚本

    如下参数根据实际情况修改 #!/bin/bash #设置网络环境 sed -i -e 's|BOOTPROTO=dhcp|BOOTPROTO=static|' /etc/sysconfig/netwo ...