vue3取消了全局事件总线，废除原因是安全性低。全局事件总线是一个全局任意组件通信技术，即任意组件间的通信均可实现。在vue3中，如果想要使用全局事件总线，需要引入第三方库mitt或tiny-emitter。
本教程操作环境：windows7系统、vue3版，DELL G3电脑。
vue3取消了全局事件总线，原因是安全性低。
vue的全局事件总线
全局事件总线，是一个全局任意组件通信技术。
顾名思义，任意组件间通信，均可实现。
立即学习“前端免费学习笔记（深入）”；
它通信是通过一个傀儡去实现的，一个所有组件均可访问到的傀儡，vue中命名叫 $bus
在vue2中
我们可以直接在 入口文件 mian.js 中使用生命周期钩子 beforecreated
直接创建 $bus
beforeCreate() {Vue.prototype.$bus = this}
登录后复制
记得把钩子写在 挂载之前即可。
使用时：
在需要接收数据的组件中使用 mounted钩子绑定事件监听
mounted() { this.$bus.$on('hello',(data) => { console.log(data); })},
登录后复制
在需要发送数据的组件中需要发送的操作中触发该方法即可
methods: { sendStudentName(){ this.$bus.$emit('hello',this.name) }},
登录后复制
还没完，如果组件销毁，记得解绑事件，在哪绑定就在哪解绑，使用beforeDestroy钩子
beforeDestroy() { this.$bus.$off('hello')},
登录后复制
在vue3
在vue3中，取消了全局事件总线，如果想要使用，我们需要引入第三方库 mitt或tiny-emitter
1、安装mitt库
npm i mitt -s
登录后复制
2、在根目录封装一个 js 文件，以便组件中导入使用
文件起名最好见名知义 例如 eventBus.js
内容：
//导入import mitt from 'mitt'; //定义,定义也最好见名知义const emitter = mitt(); //暴露export default emitter;
登录后复制
3、使用
1）相互通信的组件均需要导入js
import emitter from '../../eventBus'
登录后复制
2） 接收数据的组件 在setup（）中绑定事件监听
setup(){ emitter.on('event',(info) => { ... }) return{}}
登录后复制
这里的箭头函数，换成普通函数也可
3）发送数据的组件触发即可传递数据
setup(){function send(info) {emitter.emit('event',info))return{}}
登录后复制
4）组件销毁前，解绑事件，
onBeforeUnmount(()=>{emitter.off("event", onEvent);})
登录后复制
如果使用普通函数，则把该函数也在第二个参数的位置，如果是箭头函数，则不用写。如上 onEvent
【相关推荐：vuejs视频教程、vue的全局事件总线
全局事件总线，是一个全局任意组件通信技术。
顾名思义，任意组件间通信，均可实现。
立即学习“前端免费学习笔记（深入）”；
它通信是通过一个傀儡去实现的，一个所有组件均可访问到的傀儡，vue中命名叫 $bus
在vue2中
我们可以直接在 入口文件 mian.js 中使用生命周期钩子 beforecreated
直接创建 $bus
以上就是vue事件总线废除了吗的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2923159.html
