相比于react,vue是一个更上手很快的框架。所说简单易用,但在做Vue项目的过程中,就会发现,坑还是有的。
组件之间传递数据是一个常见的需求,父子组件传递数据在官网有介绍,除了父子组件,一般地,任意组件之间传递数据无非2种方式:
1.vuex
2.eventbus
一般地,小项目中建议用eventbus,具体怎么用呢?
main.js
var bus = new Vue() // in component A method
bus.$emit('select', 1) // in component B created hook
bus.$on('select', function (id) {
console.log('B页面打印:'+id);//1
}) // in component C created hook
bus.$on('select', function(id){
console.log('C页面打印:'+id);//1
})
这样就没有问题了吗?
如果只在B页面监听事件,那没有问题(起码表现上)。
如果在B,C2组件监听事件,那就有问题了。只要C组件的页面打开过,在B组件的页面触发事件,C组件页面的监听函数也执行了。讲道理,C页面此时已经销毁了。
我们试一下:先打开C的页面:

 

接下来,我们打开B的页面:

这真真让人迷惑。
vue的作者在git上回答过,解决办法:
在监听的B,C组件beforeDestroy()生命周期函数里取消监听:
beforeDestroy () {
bus.$off('select',this.handle)
}

 

这时候,匿名函数就不行了。,C组件在监听的时候,回调函数改成具名函数:
bus.$on('select',this.handle)

  

本文的出问题写法,完整文件:

A.vue

<template>
<div class="help-page">
<p @click="click"">A</p>
</div>
</template> <script type="text/javascript">
export default{
data(){
return{ }
},
created(){ },
methods:{
click(){
bus.$emit('select', 1)
}
}
}
</script>
<style lang="less"> </style>

  

B.vue

<template>
<div class="help-page">
<A></A>
<p>B</p>
</div>
</template> <script type="text/javascript">
import A from './A.vue'
export default{
data(){
return{ }
},
created(){
bus.$on('select', function(id){
console.log('B页面打印:'+id);
}) },
components:{
A
},
methods:{ }
}
</script>
<style lang="less"> </style>

  

C.vue

<template>
<div class="help-page">
<A></A>
<p>C</p>
</div>
</template> <script type="text/javascript">
import A from './A.vue'
export default{
data(){
return{ }
},
created(){
bus.$on('select', function(id){
console.log('C页面打印:'+id);
}) },
components:{
A
},
methods:{ }
}
</script>
<style lang="less"> </style>

  

vue中eventbus 多次触发的问题的更多相关文章

  1. vue中eventbus的使用

    eventbus的方法很是简单,我们需要做三步事情: 第一步,我们需要创造一个容器去充当我们的eventbus 第二步,我们需要去抛出,或者说提交我们的事件 第三步,我们去监听我们的那个事件(也许这才 ...

  2. vue中eventbus被多次触发(vue中使用eventbus踩过的坑)【bus.$on事件被多次绑定】

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

  3. vue 中scroll事件不触发问题

    在vue项目中需要监听滚动条滚动的位置,结果写了scroll监听事件就是不生效,最后查资料发现是页面有样式设置了over-flow:scroll,去掉之后完美解决.(页面样式中存在over-flow: ...

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

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

  5. vue中兄弟组件间通讯

    vue2.0中兄弟组件间的通讯是通过eventBus(事件发布订阅)实现的. eventBus.js import Vue from 'vue' const eventBus = new Vue() ...

  6. Vue 中的组件

    VUE中的组件 一个自定义的标签,vue就会把他看成一个组件,vue可以给这些标签赋予一定意义:一个页面就是一个组件 好处: 1.提高开发效率 2.方便重复使用 3.便于协同开发 4.更容易被管理和维 ...

  7. vue的eventBus

    首先在main.js中 Vue.prototype.$eventBus = new Vue() A组件中通过触发事件或者其他什么,然后发射数据 this.$eventBus.$emit('key',' ...

  8. vue中8种组件通信方式, 值得收藏!

    vue是数据驱动视图更新的框架, 所以对于vue来说组件间的数据通信非常重要,那么组件之间如何进行数据通信的呢? 首先我们需要知道在vue中组件之间存在什么样的关系, 才更容易理解他们的通信方式, 就 ...

  9. vue 中一些API 或属性的常见用法

    prop 官方解释:Prop 是你可以在组件上注册的一些自定义特性.当一个值传递给一个 prop 特性的时候,它就变成了那个组件实例的一个属性. 通俗点讲就是:prop是父组件用来传递数据的一个自定义 ...

随机推荐

  1. 如何修改cnblogs的文本编辑器

    我发现从别处复制过来的文本,文字上下间隔太大,所以我点击“html”标签,然后,把html内容复杂到记事本里,用记事本替换的功能,把“<p>”替换为“<p style="p ...

  2. noip模拟赛 时之终末

    题目背景 圣乔治:不用拘泥,剩下的时间已不多…… 圣乔治:直呼我的真名—— 丝佩碧雅:圣乔治大人 圣乔治:如今,已无法维持结界,或是抑制深渊的前进 圣乔治:既然如此,我将献上这副身躯,期望最后的战斗 ...

  3. 使用git bash向github远程仓库提交代码

    1.登录github,创建仓库. 2.切换到要提交的文件目录下. 3.打开git bash 3.1.初始化仓库 git init 3.2.将本地仓库与远程仓库关联 git remote add ori ...

  4. [bzoj4154][Ipsc2015]Generating Synergy_KD-Tree_dfs序

    Generating Synergy bzoj-4154 Ipsc-2015 题目大意:给定一棵n个节点树,m个操作,支持:将一个点周围所有距该点距离不超过l的子结点的颜色改成另一种颜色:查询单点颜色 ...

  5. 关于Spring的xml文档的简单实用配置

    Spring的spring.xml文档的配置 最近在写Spring的配置文件时,发现Spring文档的配置其实没必要那么繁琐记忆,网上的很多文章都写得很繁琐,如果所有的东西按照路径去查找,可以很快的帮 ...

  6. HDU 4525

    也是水题了,不过注意负负也可以为正就好了. 今天看见bestcoder上的人那么厉害,唉,我什么时候才能赶上啊.. #include <iostream> #include <cst ...

  7. java 的collection

    参考:http://skyuck.iteye.com/blog/526358 https://www.tutorialspoint.com/java/java_collections.htm Prio ...

  8. saltstack结合Elasticsearch来做salt运行结果展现

    salt尽管好用可是机器管理的越来越多,通过cli的结果输出方式查看运行结果越来越多不能满足我的需求.并且作为一个推动运维自己主动化的攻城狮,使用这样的人眼查看运行结果的方式简直土到掉渣.尽管别人看起 ...

  9. IOS7中动态计算UILable的高度

    .h文件 #import <UIKit/UIKit.h> @interface UILabel (ContentSize) - (CGSize)contentSize; @end .m文件 ...

  10. luogu1514 引水入城

    题目大意 在一个遥远的国度,一侧是风景秀美的湖泊,另一侧则是漫无边际的沙漠.该国的行政区划十分特殊,刚好构成一个NN 行\times M×M 列的矩形,如上图所示,其中每个格子都代表一座城市,每座城市 ...