将事件从外部 js 文件发送到 Vuejs 组件？答案

【问题标题】：Send event from external js file to Vuejs component?将事件从外部 js 文件发送到 Vuejs 组件？
【发布时间】：2021-08-26 12:50:39
【问题描述】：

如何将事件从外部 js 文件发送到 Vue 组件？我在外部文件中使用 signalR，我想从 api 运行时获取数据，但是当获取数据时无法将其发送到 vue

这是 js 文件：

import { HubConnectionBuilder } from "@microsoft/signalr";
let connection;

export const ReceiveMessagePrivate = () => {
  var dataJson;
  connection.on(
    "ReceiveMessagePrivate",
    (GroupGuid, UserGuid, UserName, MessageGuid, MessageText, TimeString, FileName, FileType) => {
      dataJson = {
        GroupGuid: GroupGuid,
        UserGuid: UserGuid,
        UserName: UserName,
        MessageGuid: MessageGuid,
        MessageText: MessageText,
        TimeString: TimeString,
        FileName: FileName,
        FileType: FileType
      };
    }
    return dataJson
  );
};

vue 文件组件：

import * as userHub from "../userHub";
export default {

  created() {
    consol.log(userHub.ReceiveMessagePrivate());
  },

}

【问题讨论】：

标签： javascript vue.js events data-binding signalr

【解决方案1】：

它在我使用 eventBus

时运行

js 文件：

import { HubConnectionBuilder } from "@microsoft/signalr";
import Vue from "vue";
let connection;
export const eventBus = new Vue();

export const ReceiveMessagePrivate = () => {
  var dataJson;
  connection.on(
    "ReceiveMessagePrivate",
    (GroupGuid, UserGuid, UserName, MessageGuid, MessageText, TimeString, FileName, FileType) => {
      dataJson = {
        GroupGuid: GroupGuid,
        UserGuid: UserGuid,
        UserName: UserName,
        MessageGuid: MessageGuid,
        MessageText: MessageText,
        TimeString: TimeString,
        FileName: FileName,
        FileType: FileType
      };
      eventBus.$emit("recMesPri", dataJson);
    }
  );
};

vue 文件：

import * as userHub from "../userHub";
export default {
.
.
.
  created() {
    userHub.ReceiveMessagePrivate();
    userHub.eventBus.$on("recMesPri", (data) => {
      console.log(data)
    });
  },
.
.
.
}

【讨论】：

【解决方案2】：

我确认事件总线适合此用例。另外，最好在每次销毁 vue 组件时取消订阅监听器，因为每次创建 vue 组件时都会添加一个新的监听器：

created() {
  userHub.ReceiveMessagePrivate();
  userHub.eventBus.$on("recMesPri", this.handler);
},
beforeDestroy() {
  userHub.eventBus.$off("recMesPri", this.handler);
},
methods: {
  handler(data) {
    console.log(data);
  },
},

【讨论】：