Vue就像画画用的颜料和笔触，是用于前端开发的便利工具。它是用JavaScript搞出来的，主要任务就是让网页变得炫酷。大家平时玩游戏看到的各种角色、按钮、对话框等，很多都是Vue的功劳
Vue真好用！那个按钮以前得折腾半天，现在一下子就能搞定，怪不得大家都喜欢它！
组件是什么？
你看过没有，用Vue的组件做网页就像搭积木一样简单？像那些按钮、文本框这些小玩意儿，每个都能独立使用，最后组合起来就是一个完整的网页了！
这个挺酷的！随心所欲地拼搭，想拆就拆，想放哪就放哪。网页设计也变得更自由了！
为什么需要组件间通信？
这网站，就是我们的好朋友，还带了两个小帮手——’天气’和’新闻’。比如说，要是今天突然下雨了，那新闻就得赶紧告诉大家，然后他们三个就可以聊聊天。
Vue里的消息传递技巧多种多样，不过有时候咱们简单点儿就行，这时候就要请出咱们的“事件总线”大侠出场了。
事件总线是什么？
是不是说，每个人都可以用这个对讲机？就跟随便贴张纸差不多，想要什么内容往上面扔就是了，要用时再找出来看看。
Vue事件总线，说白了就是个大管家！咱们把它当作家庭保姆使唤，啥事儿都交给它搞定。你家那些小零件藏得再深也不怕，有这“热线电话”，随时随地找得到！
如何创建事件总线？
// main.js import Vue from 'vue' Vue.prototype.$bus = new Vue()
想做事件总线？太容易了！在Vue应用的启动页面先创建个Vue实例，然后加几段代码就能搞定啦
知道么？Vue能让大家都受益，看看这个案例就明白！
其实超容易！首先在主文件里创建一个空白的Vue实例，再把它跟Vue的原型关联起来就搞定了。这样一来，只要APP启动，每个组件就能通过这唯一的实例互相沟通！
如何在发送组件中发送事件？
// SenderComponent.vue
export default {
methods: {
sendData() {
this.$bus.$emit('event-name', data)
}
}
}
想用Vue的事件功能？那就看$emit！说白了，就像告诉大家你要干啥，再告诉他们你要分享什么信息。举个例子，如果天气突然变了，就用$emit发个“天气变啦”的通知，顺便把最新天气也带上。
发就对了，无论谁收到都会弄好的，你喜欢的那部分肯定没问题。
如何在接收组件中监听事件？
告诉你，用$on方法就能解决好多问题。只需要确定一下两个点，一个是你想要触发的事件，另一个就是处理这个事件的代码块儿。这样的话，只要有什么事情发生，这个代码块儿就会自动运行了哟~
看这个”天气变化”新闻用$on这个方法就能随时了解最新天气情况，然后新闻也会跟着更新！
// ReceiverComponent.vue
export default {
created() {
this.$bus.$on('event-name', this.handleEvent)
},
methods: {
handleEvent(data) {
// 处理接收到的数据
}
}
}
如何在接收组件销毁时注销事件？
记得，邮件来啦别忘了看！操作超级简单，跟关监控似的，只需要填写你正在进行啥活动就好！
如果小部件搞失踪，那就直接用$off命令把”天气变化”给关掉。没了小部件，传输的信息就少了，内存泄露的问题也就迎刃而解！
使用事件总线的注意事项
事件总线挺好使，但别乱搞！你要是需要跟其他组件协作，那就试试Prop或者$emit。至于事件总线，就是给那些没血缘关系的组件们准备的。
// ReceiverComponent.vue
export default {
beforeDestroy() {
this.$bus.$off('event-name', this.handleEvent)
},
methods: {
handleEvent(data) {
// 处理接收到的数据
}
}
}
你别搞坏事件总线，修起来可麻烦了。咋办？还是得看看具体情况！
总结
说实话，Vue的这个事件总线就是让咱们组件之间互通有无的。用上它后，每个部分就能无障碍交流。但是别弄乱了，要记得取消监听，要不就会出大问题。
小伙伴们好，你们有用过Vue的事件总线吗？能给我们讲讲你们是怎么用这个东西来传组件信息的吗？欢迎有实战经验的大佬分享心得哟~快给我点个赞，转发支持！
评论0