只需三步 带你了解 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; });