问题描述:只要页面没有强制刷新,存在组件切换,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. 关于redis的几件小事(五)redis保证高并发以及高可用

    如果你用redis缓存技术的话,肯定要考虑如何用redis来加多台机器,保证redis是高并发的,还有就是如何让Redis保证自己不是挂掉以后就直接死掉了,redis高可用 redis高并发:主从架构 ...

  2. 13 UA池和代理池

    一. 下载中间件 框架图 下载中间件(Downloader Middlewares) 位于scrapy引擎和下载器之间的一层组件. - 作用: (1)引擎将请求传递给下载器过程中, 下载中间件可以对请 ...

  3. computed、watch、methods的区别

    computed:计算属性是用来声明式的描述一个值依赖了其它的值.当你在模板里把数据绑定到一个计算属性上时,Vue 会在其依赖的任何值导致该计算属性改变时更新 DOM.这个功能非常强大,它可以让你的代 ...

  4. 爬虫框架Scrapy 的使用

    一.官网链接 https://docs.scrapy.org/en/latest/topics/architecture.html 二.Scrapy 需要安装的包 #Windows平台 # pip3 ...

  5. HttpClient 释放连接

    Release the Connection:释放连接 This is a crucial step to keep things flowing. We must tell HttpClient t ...

  6. @Validated @RequestBody @RequestParam配合使用校验参数

    1.  @Validated @RequestBody 配合使用 两者搭配进行参数的校验,要想自己捕获该异常,需要自定义全局异常处理器 2.  @Validated @RequestParam 配合使 ...

  7. elastic 基本操作

    官方参考文档: https://www.elastic.co/guide/cn/elasticsearch/guide/current/index-doc.html 1.查看 有哪些索引: curl ...

  8. deep_learning_Function_bath_normalization()

    关于归一化的讲解的博客——[深度学习]Batch Normalization(批归一化) tensorflow实现代码在这个博客——[超分辨率]TensorFlow中批归一化的实现——tf.layer ...

  9. 三天读完调整自己每天的精力——读书笔记(Unfinished)

    近段时间精力低下,读了一本Jim Loehr的The Power full engagement 精力管理的书,我们有时候往往不是时间规划不够,而是没有规划好自己的精力. 橙色字体是自己对于这本书的现 ...

  10. PhpStorm中如何使用database工具,详细操作方法

    1.简介:   PhpStorm是一个轻量级且便捷的PHP IDE,其提供的智能代码补全,快速导航以及即时错误检查等功能大大提高了编码效率.它以其独特的开发便利性,短时间内赢得了大量PHPer的青睐. ...