问题描述:只要页面没有强制刷新,存在组件切换,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. nginx+php设置大文件请求上传(502及504问题处理)

    502问题 php-fpm 修改项: request_terminate_timeout 位置: eg: /etc/php5/fpm2/pool.d/www.conf ; The timeout fo ...

  2. Visual Studio解决方案的目录结构设置和管理

    摘至:http://blog.csdn.net/lp310018931/article/details/47991759 首先,解决方案和项目文件夹包含关系(c++项目): VS解决方案和各个项目文件 ...

  3. 6.redis

    1.Redis的安装以及客户端连接 安装:apt-get install redis-server 卸载:apt-get purge --auto-remove redis-server 启动:red ...

  4. Spring笔记之配置数据源

    任何DAO访问数据库,最开始都需要配置数据源,数据源中定义了访问数据库的常用配置.有了数据源才能创建数据模板,然后把数据模板注入到DAO中,通过调用数据访问模板中的相应方法来对数据库进行相关操作. 常 ...

  5. hive创建分区表

    #创建分区表CREATE TABLE if not exists data_center.test_partition (id int,name string,age int)PARTITIONED ...

  6. [易学易懂系列|rustlang语言|零基础|快速入门|(18)|use关键词]

    [易学易懂系列|rustlang语言|零基础|快速入门|(18)|use关键词] 实用知识 use关键词 我们今天来讲讲use关键词. 1.简单来说,use是给其他方法或资源定义一个别名,然后调用者, ...

  7. Gym - 102040B Counting Inversion (数位dp)

    题意:求[a,b]区间内的数字中正序对的个数. 具体思路参考: https://blog.csdn.net/weixin_43135318/article/details/88061396 https ...

  8. Java如何导入一个新的项目

    下面将展示如何将一个项目导入eclipse中 1.点击文件-------->从系统中打开项目 2.选择你要导入的项目所在的目录 3.配置环境 单击项目,选择构建路径------>配置构建路 ...

  9. JAVA》eclipse——(三)jsp学习

    导出一个war包

  10. vue中前进刷新、后退缓存方案收集

    来源掘金: https://juejin.im/post/5b2ce07ce51d45588a7dbf76 来源博客园 https://www.cnblogs.com/wonyun/p/8763314 ...