只需三步 带你了解 Vue事件总线(EventBus)
第一步:直接在项目中的
main.js
初始化 EventBus
:
// main.js Vue.prototype.$EventBus = new Vue()
第二步:找到两个页面A和B,A向B发送事件
<!-- A.vue --> <template> <button @click="sendMsg()">-</button> </template> <script> import { EventBus } from "../event-bus.js"; export default { methods: { sendMsg() { this.$EventBus.$emit("aMsg", '来自A页面的消息'); } } }; </script>
第三步:B接收事件
mounted() { this.$EventBus.$on("aMsg", (msg) => { // A发送来的消息 this.msg = msg; });
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 全程不用写代码,我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了,比商业数据库还牛
· 记一次.NET内存居高不下排查解决与启示
· 白话解读 Dapr 1.15:你的「微服务管家」又秀新绝活了
· DeepSeek 开源周回顾「GitHub 热点速览」