vue之$eventBus非父子组件传值使用解析

最新推荐文章于 2024-03-28 08:41:45 发布

qq_41318044

最新推荐文章于 2024-03-28 08:41:45 发布

阅读量378

点赞数

分类专栏： javascript javascript教程系列 javacsript的教程系列文章标签： js javascript vue.js

本文链接：https://blog.csdn.net/qq_41318044/article/details/108879711

版权

2 篇文章 0 订阅

订阅专栏

2 篇文章 0 订阅

订阅专栏

1 篇文章 0 订阅

订阅专栏

我们在js入口文件中给vue原型声明一个$eventBus,他的值是一个不带dom组件的vue实例
```
          Vue.prototype.$evnetBus = new Vue();
```

这样我们在一个组件创建时候进行一个事件监听

          	//在组件一中我们可以在created中进行监听

              created(){    this.$eventBus.$on(       "  事件名 1"      ,       "事件处理函数1"     )    }

触发eventBus
```
           //在组件二中我们就可以在任意地方进行触发

               this.$eventBus.$emit(  "  事件名1 "   ,     "  需要传递的参数1  "  )
```
- 这样我们组件一中的事件监听被执行,传递的参数就收到了
- $e v e n t B u s 使用起来很方便, 但是如果不正确的使用, 将会是一场灾难, 组件如果被循环得创建和销毁,$ eventBus的监听需要我们手动移除,不然因为外部的引用会一直存在,在后期被反复触发,因此所有$evnetBut的监听需要我们在组件销毁时候将监听进行移除
我们可以在vue生命周期beforDestory中进行移除,因为我们上面再组件一的created中执行了监听,我们同样在组件一的beforDestory中写入以下代码保证在组件一在被销毁时候移除监听

移除eventBus监听

  beforDestory(){    this/$eventBus.off (    "事件名1"    )   }

关注