在Vue编码中，组件之间的信息沟通经常出现。比如Romney和Clinton这个两个组件想一起讨论”voter投票行为”这件事怎么办？不用怕！Vue早就为我们想好办法了——那就是使用事件总线机制，它就好像一个全球范围内的广播站似的，虽然也是个Vue的实例，但用法可能有点不同。你只需要掌握$emit和$on这两个关键指令，就能发布你想要分享的事件，同时还能接收来自其他组件的消息。
要说Vue的神奇之处，那就是有个“事件总线”能让各种组件之间自由地交流信息，这样大家就能和谐共处！快来跟我学一学如何巧妙运用这个“事件总线”，轻松搞定Vue中的组件间通讯问题！
创建事件总线对象
首先我们得在 Vue 应用中搭建个事件总线大佬。简单点儿说，就是把Vue实例当作这个总线家伙，然后再下发给其他的组件来使用。这样做的话，以后哪天哪个组件需要用到总线，直接召唤过来就能用了！
代码示例：
javascript// main.js import Vue from 'vue' // 创建事件总线对象 export const EventBus = new Vue()import Vue from 'vue';
咱们就把这个叫做EventBus的东西设为个Vue实例。这个程序是教你怎么在Vue上做出一个叫做EventBus的东东，再把它分享给其他组件用。有了这个EventBus，你就可以任意添加自己喜欢的事件，想发就发，想收就收。
发送事件
咱们就是要在某物件里搞点新鲜事，然后传点儿相关消息呗。那么，如何操作？看看Vue的$emit技巧！
methods:{
sendEvent(){
“Sender”组件喊话，“我说，‘这是我送出的数据哦’！”然后它把这个话儿扔到EventBus上，让有兴趣的人或东西都能收到。
// Sender.vue export default { methods: { sendEvent() { EventBus.$emit('my-event', 'Hello World!') } } }}
}
看完这段话，你们懂了？给你们解释下，这个sendEvent方法其实就是让EventBus给’sendEvent’这个咒语点火，然后让它发送个带文字信息的信号。
接收事件
别的组件发来的事件，就是等那事儿真正发生了再照着做。在Vue里，用EventBus.$on这一招就能感知和处理自定义事件。
created(){
别忘了直接在EventBus那儿接通’my-event’，然后用handleEvent来搞定事儿。
},
destroyed(){
// Receiver.vue export default { created() { EventBus.$on('my-event', this.handleEvent) }, destroyed() { EventBus.$off('my-event', this.handleEvent) }, methods: { handleEvent(data) { console.log(data) // 输出：'Hello World!' } } }先把’my-event’那个东西关了，以后就不用接收我的handleEvent 方法处理的那些事儿！
handleEvent(data){
哈喽，received data is: data
接到数据后，我们还能做点啥？
这小段儿直接讲明白了咋在 Receiver 里用钩子绑定和解开对叫作 my-event 的自定事的监听。第一步得用 EventBus.$on 让系统知道你要看这个事儿，再配上个 handlerEvnet 回调函数处理接收的数据。然后，等到组件没了（bye bye 钩子 destroyed），用$off 把监听关了，防止内存泄漏！
全局通讯实现
搞定我们成功让Vue应用里的小部件连接上了。只要发送器（Sender）发个信号，收件人（Receiver）就会收到一个名叫“my-event”的新鲜事，再用处理事件（handleEvent）来获取数据分析。发现没？原来就在这种轻松愉快中，各类部件间的消息传递就搞定了呢～
注意事项与适用场景
别以为用事件总线搞全局组件通信简单，其实也有讲究喔！这东西毕竟是通用的，复杂点的问题难免让人头疼，处理起来还真不容易想明白。所以，对大项目和复杂项目来说，还是换种方式，比如Vuex这种状态管理工具。
记得注意，不要随便用全局通信，这会使代码变得难以理解，也不容易修改。把组件间的关系搞好并找到合适的沟通方法，代码质量和可维护性都会提高不少。
结语与展望
今儿咱们说说Vue里咋整全局组件通信？就是那个叫做“事件总线”哒东东。实话说，Vue中弄这个超简单，真的有帮助提升开发速度和码字功底~会用并适度利用这个功能，你就能轻松驾驭项目！
记得多看看我写的那些内容哈。想过没？说不定你们现在或将来的某个项目就用得上这个全局通信的招式？来这边一起讨论讨论！
原文链接：https://www.icz.com/technicalinformation/web/2024/04/14282.html，转载请注明出处~~~
评论0