Vue2中如何使用全局事件总线实现任意组件间通信
前言：
vue 中组件间通信的方式有很多 ------ 父传子propos，全局事件总线，消息订阅，vuex......等等，这篇文章带大家学习一下通过全局事件总线来实现任意组件间的通信。
一：什么是全局事件总线
全局事件总线 其实就是一个中间人，组件与组件之间的通信需要借助于这个中间人，在一个组件中向其绑定自定义事件，然后在另一个组件触发向全局事件总线中绑定的这个自定义事件并传递值，进而实现通信。我们可以通过下面的一个图来粗略解释什么是全局事件总线
组件C向组件A传递数据：
- 首先组件A向全局事件总线绑定另一个自定义事件，并定义了当这个事件do被触发时要执行的回调函数
- 然后由组件C去触发全局事件总线中的自定义事件do，并向其回调中传递数据
- 这样就实现了组件C去触发事件并传递数据，组件A去定义事件并接受数据
二：全局事件总线怎么创建
上一版块我们知道了全局事件总线就是一个处于任何组件都访问得到的中间媒介，既然要让所有组件都访问得到，那我们就要转换思路，即让 vc 或者 vm 访问得到：
在 vue 文件的 main.js 入口函数中的 beforeCreate 钩子中创建：
$bus 就是我们的全局事件总线，其定义并赋值后就是 vm，可以访问 vue 原型对中的所有方法，这就包含了绑定的方法 $on，触发的方法 $emit，解绑的方法 $off
new Vue({
el:'#app',
render: h => h(App),
//定义全局事件总线 $bus
beforeCreate:function(){
Vue.prototype.$bus=this;
}
})三：绑定自定义事件
创建过全局事件总线后，就可以开始绑定自定义事件了，使用 $on 绑定自定义事件，绑定要写在 mounted 钩子中，后面为其触发时执行的回调。
//A组件
export default {
name:'componentA',
data() {
return {}
},
mounted(){
this.$bus.$on('do',(data)=>{ //为全局事件总线绑定自定义事件do
console.log('我收到了B组件传来的姓名：',data);
})
}
}四：触发自定义事件
绑定过后就可以在另一个组件中触发了，触发使用的是 $emit，触发并将后面的值传给自定义事件被触发时执行的回调
//组件B
export default {
name:'componentB',
data() {
return {
name:'张三'
}
},
methods:{
get:function(){ //在该组件的模板中添加一个按钮点击执行该函数 get
this.$bus.$emit('do',this.name) //触发自定义事件do
},
}
}成功实现任意组件间传递数据
五：解绑自定义事件
vue 实例总将被销毁，那么我们就要在实例销毁前解绑自定义事件，这就要和绑定自定义事件同级书写，即写在 beforeDestroy 钩子中，使用 $off 解绑
//A组件
export default {
name:'componentA',
data() {
return {}
},
mounted(){
this.$bus.$on('do',(data)=>{ //为全局事件总线绑定自定义事件do
console.log('我收到了B组件传来的姓名：',data);
})
},
beforeDestroy(){
this.$bus.$off('do') //解绑自定义事件do
}
}总结
到此这篇关于Vue2中如何使用全局事件总线实现任意组件间通信的文章就介绍到这了,更多相关Vue2任意组件间通信内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
大家都经常使用美团app买电影票，很多朋友不知道她的功能是怎么实现的，作为我程序员一枚对它的算法很好奇，今天小编就把基于Vue实现美团app的影院推荐选座功能分享到脚本之家平台，感兴趣的朋友一起看看吧2018-08-08
这篇文章主要为大家介绍了非常全面vue的组件通讯方法总结，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-07-07
面包屑导航栏是一种用户界面组件,用于展示用户在网站或应用中的路径,它包括了从主页到当前页面的链接序列,有助于用户快速了解和导航至上级页面,本文就来介绍一下Element-UI组件实现面包屑导航栏的示例代码,感兴趣的可以了解一下2024-09-09
Vue脚手架指的是vue-cli,它是一个快速构建**单页面应用程序(SPA)**环境配置的工具，cli是(command-line-interfac)命令行界面,下面这篇文章主要给大家介绍了关于Vue脚手架搭建及创建Vue项目流程的相关资料,需要的朋友可以参考下2022-09-09
这篇文章主要介绍了Vue中使用eslint和editorconfig方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-05-05
这篇文章主要给大家介绍了关于如何使用vuex实现兄弟组件通信的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2018-11-11
这篇文章主要介绍了Vue组件生命周期运行原理解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2020-11-11
关于Element Loading的全局使用(自定义Loading)
这篇文章主要介绍了关于Element Loading的全局使用(自定义Loading),具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-08-08
v-for 指令需要使用 item in items 形式的特殊语法，其中 items 是源数据数组，而 item 则是被迭代的数组元素的别名。今天通过本文给大家介绍Vue中v-for更新检测的操作方法，感兴趣的朋友一起看看吧2021-10-10
解决vite项目Uncaught Syntaxerror:Unexpected token＞vue项
这篇文章主要介绍了解决vite项目Uncaught Syntaxerror:Unexpected token＞vue项目上线白屏问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-03-03
最新评论