189 8069 5689
今天小编给大家分享一下vue事件总线取消了吗的相关知识点，内容详细，逻辑清晰，相信大部分人都还太了解这方面的知识，所以分享这篇文章给大家参考一下，希望大家阅读完这篇文章后有所收获，下面我们一起来了解一下吧。
在长洲等地区，都构建了全面的区域性战略布局，加强发展的系统性、市场前瞻性、产品创新能力，以专注、极致的服务理念，为客户提供成都网站制作、成都网站建设 网站设计制作专业公司,公司网站建设,企业网站建设,品牌网站建设,成都营销网站建设,外贸网站建设,长洲网站建设费用合理。
vue3取消了全局事件总线，废除原因是安全性低。全局事件总线是一个全局任意组件通信技术，即任意组件间的通信均可实现。在vue3中，如果想要使用全局事件总线，需要引入第三方库mitt或tiny-emitter。
vue3取消了全局事件总线，原因是安全性低。
全局事件总线，是一个全局任意组件通信技术。
顾名思义，任意组件间通信，均可实现。
它通信是通过一个傀儡去实现的，一个所有组件均可访问到的傀儡，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
以上就是“vue事件总线取消了吗”这篇文章的所有内容，感谢各位的阅读！相信大家阅读完这篇文章都有很大的收获，小编每天都会为大家更新不同的知识，如果还想学习更多的知识，请关注创新互联行业资讯频道。