当前位置：首页 > news >正文

Vue2 全局事件总线：通俗易懂 + 简单案例

news 2025/9/25 14:14:52

全局事件总线就像一个 “全校通知群”—— 不管是一年级（子组件）、二年级（父组件）还是教务处（隔代组件），只要进了这个群，就能给群里任何人发消息（传数据），不用管彼此是什么关系。

一、先搞懂核心：为啥需要它？

比如有两个毫无关系的组件：学生组件（想发 “我叫小明”）和老师组件（想收这个名字）。它们不是父子，没法用之前的 “子传父” 自定义事件，这时候就需要 “全局事件总线” 这个 “群” 来搭桥。

二、三步用起来（带完整案例）

我们用「学生组件（发数据）+ 老师组件（收数据）」举例，需求：学生点按钮，把自己的名字传给老师。

第一步：建 “通知群”（安装全局事件总线）

首先要在项目入口（main.js）里建这个 “群”，让所有组件都能进群。原理：给 Vue 的 “公共原型” 上挂一个 “群聊账号”（叫$bus），所有组件都能通过this.$bus找到它。

main.js 代码：

import Vue from 'vue'
import App from './App.vue'Vue.config.productionTip = false// 建“通知群”：给所有组件挂一个共用的Vue实例（$bus）
new Vue({el: '#app',render: h => h(App),// beforeCreate钩子：组件还没初始化数据，先把“群”建好beforeCreate() {Vue.prototype.$bus = this  // this就是当前Vue实例，作为“群聊账号”}
})

第二步：老师进群等消息（接收方绑定事件）

老师组件（收数据的）要先在 “群” 里说：“谁发学生名字，我接收！”—— 这就是用$bus.$on绑定事件。

Teacher.vue（老师组件）代码：

<template><div class="teacher"><h3>我是老师组件</h3><p>收到的学生名：{{ studentName }}</p> <!-- 显示收到的名字 --></div>
</template><script>
export default {name: 'Teacher',data() {return {studentName: ''  // 存学生传过来的名字}},// 组件挂载后，进群等消息（确保“群”已建好）mounted() {// $bus.$on("事件名", 收到消息要做的事)this.$bus.$on('send-student-name', (name) => {// name就是学生传过来的名字this.studentName = name  // 把名字存起来，页面就显示了})},// ！重要：老师退群前，取消“等消息”（防止占内存）beforeDestroy() {this.$bus.$off('send-student-name')  // 解绑事件，不再接收}
}
</script>

第三步：学生发消息到群里（发送方触发事件）

学生组件（发数据的）点按钮时，在 “群” 里喊：“我叫小明！”—— 这就是用$bus.$emit触发事件。

Student.vue（学生组件）代码：

<template><div class="student"><h3>我是学生组件</h3><!-- 点按钮，发消息到“群”里 --><button @click="sendMyName">把名字发给老师</button></div>
</template><script>
export default {name: 'Student',data() {return {myName: '小明'  // 要传给老师的名字}},methods: {sendMyName() {// $bus.$emit("事件名", 要传的数据) —— 事件名要和老师绑的一致！this.$bus.$emit('send-student-name', this.myName)}}
}
</script>

第四步：父组件组装（App.vue）

最后把两个组件放在父组件里，让它们能找到 “群”：

App.vue 代码：

<template><div class="app"><h2>全局事件总线演示</h2><Student /> <!-- 学生组件 --><Teacher /> <!-- 老师组件 --></div>
</template><script>
import Student from './components/Student.vue'
import Teacher from './components/Teacher.vue'export default {components: { Student, Teacher }
}
</script>