美文网首页Vue
Vue中组件通信(eventBus)

Vue中组件通信(eventBus)

作者: Amanda妍 | 来源:发表于2021-07-03 11:45 被阅读0次

在vue项目中,父子组件间的通讯很方便。但兄弟组件或多层嵌套组件间的通讯,就会比较麻烦。这时,使用eventBus通讯,就可以很便捷的解决这个问题。
eventBus可以在全局定义,实现全项目通讯,使用方法也很简单。
使用方式:
1、初始化——全局定义
全局定义,可以将eventBus绑定到vue实例的原型上,也可以直接绑定到window对象上.

//main.js
//方式一
Vue.prototype.$EventBus = new Vue();
//方式二
window.eventBus = new Vue();

2、监听事件

//使用方式一定义时
this.$EventBus.$on('eventName', (param1,param2,...)=>{
    //需要执行的代码
})
//使用方式二定义时
EventBus.$on('eventName', (param1,param2,...)=>{
    //需要执行的代码
})

3、触发事件

//使用方式一定义时
this.$EventBus.$emit('eventName', param1,param2,...)
//使用方式二定义时
EventBus.$emit('eventName', param1,param2,...)

4、移除监听事件
为了避免在监听时,事件被反复触发,通常需要在页面销毁时移除事件监听。或者在开发过程中,由于热更新,事件可能会被多次绑定监听,这时也需要移除事件监听。

//使用方式一定义时
this.$EventBus.$off('eventName');
//使用方式二定义时
EventBus.$off('eventName');

相关文章

  • Vue组件通信方式

    本文主要介绍关于Vue组件通信的四种方式,分别是父向子组件通信、子向父组件通信、非父子组件的EventBus通信、...

  • 手写事件总线eventBus

    在vue中,我们有时会用eventBus进行简易组件通信,那么这个eventBus究竟是如何实现的呢?eventB...

  • Vue中组件通信(eventBus)

    在vue项目中,父子组件间的通讯很方便。但兄弟组件或多层嵌套组件间的通讯,就会比较麻烦。这时,使用eventBus...

  • vue事件总线EventBus

    vue组件有父子组件通信:props兄弟组件通信:可以使用vuex,还可以使用事件总线eventBus 使用方法:...

  • vue npm包的publish与install

    最近写了一个基础的Vue UI框架, 非常适合学习Vue基本知识,组件及Vue组件之间通信(涉及eventBus、...

  • vue兄弟组件之间通信--eventBus

    原文地址 eventBus eventBus单独的事件中心,用来管理组件之间的通信。 由于 Vue 实例实现了一个...

  • Vue实现组件间通信

    父子组件通信on('xxx',function(){}) 爷孙组件通信eventbusvar eventBus =...

  • vue的简单状态管理模式-store(非vux)

    状态管理也就是数据状态管理,vue 应用程序的各组件之间经常需要进行通信,除了 v-on、EventBus 等通信...

  • 组件间通信

    组件间通信 EventBus实现通信在Activity注册EventBus,在Activity写入消息订阅接收消息...

  • eventBus封装

    中央事件总线eventBus的实质就是创建一个vue实例,通过一个空的vue实例作为桥梁实现vue组件间的通信。它...

网友评论

    本文标题:Vue中组件通信(eventBus)

    本文链接:https://www.haomeiwen.com/subject/nfneultx.html