vue中EventBus的使用(一个页调用另一个页面中的方法)

小白终成大白

工作笔记

---

---

前言

前端vue开发,A页调用B页中的方法 EventBus的使用

---

一、场景

打开登录窗口的两种场景
1.直接点击顶部导航栏 [登录] 打开登录窗口
2.在需要登录的界面提示,点击[去登录]时 打开登录窗口

不能在每个页面都写一个登录窗口用于弹出
所以想写在导航栏的组件中写一个弹窗之后 在其他的页面调取该页打开弹窗的方法

在不同需要登录的页面(A页面)弹出提示,点击去登录
　　　　　　　　　　　↓
调用顶部导航栏组件中的登录弹窗开启的方法(B页面的方法)

这时候就会产生在A页调用B页方法的问题

二、使用步骤

1.在A页引入

代码如下（示例）：

import { MessageBox } from "element-ui";
import Vue from 'vue';
export const EventBus = new Vue();

2.详细代码

代码如下（示例）：

if (
    localStorage.getItem("userInfo") == "" ||
    localStorage.getItem("userInfo") == null
  ) {
    MessageBox.alert("您还没有登录", "提示", {
      confirmButtonText: "去登录",
      callback: (action) => {
        EventBus.$emit('callLoginDialog');
      },
    });
  }

3.在B页引入

import { EventBus } from "@/utils/local.js";

3.B页代码

 mounted() {
    EventBus.$on("callLoginDialog", () => {
      this.showLogin();
    });
  },

---

总结

在上面的代码中，我们创建了一个事件总线 EventBus，然后在页面 B 中监听名为 callLoginDialog 的事件，并在事件触发时执行相应的方法。在页面 A 中，我们可以通过 EventBus 实例直接触发 callLoginDialog事件，从而调用页面 B 的方法。