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

Question

如何将事件从外部 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());
  },

}

Answer 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)
    });
  },
.
.
.
}

Answer 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);
  },
},

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

Send event from external js file to Vuejs component?

javascript

data-binding

events

signalr

vue.js