vue之消息发送与接收组件

首先得在vue中建立全局消息的一个组件ts文件：MessageBus.ts

//列子可以建在store文件下（不知道组件建这什么地方 的情况下）；

组件的内容有：消息、注册事件（就是消息的接收事件）、发送事件；

/**
 * 全局消息组件
 * @param Vue
 */
class MessageBus {
    // 消息
    private static messageQueue: Map<string, any> = new Map<string, any>();

    /**
     * 注册事件
     * @topic:      主题名称
     * @callback:   回调事件
     */
    public static addEventListener = (topic: string, callback: any) => {
        MessageBus.messageQueue.set(topic, callback);
    };

    /**
     * 发送事件
     * @topic:  主题名称
     * @data:   发送数据
     */
    public static onSend = (topic: string, data) => {
        let callback = MessageBus.messageQueue.get(topic);
        if (callback instanceof Function) {
            callback(data);
        }
    };
}

export default MessageBus;

接下来就是如何使用我们的组件：

1，onSend()发送信息事件：

     一，在我们需要发送消息的ts文件里面引入MessageBus.ts。并onSend() 发送文件；

     二，onSend() 发送文件注意需要两个入参（），类型一般是String、内容any(指任意类型)。

import MessageBus from "@/store/MessageBus";

 const checkModelPass = (feedback) => {
            if (feedback) {
                return;
            }
            batchAddModelFeedback(feedback).then(res => {
                if (res.success) {
                    MessageBus.onSend("updateModelAuditState", {
                        status: AuditStatus.NOT_PASS,
                        groupIds: props.groupIds as []
                    });
                    emit("update:show", false);
                    emit("reject", true);
                }
            });
        };

2，addEventListener()接收消息。

     一，同样引入messageBus.ts。

     二，发送时指定的updateModelAuditState，接收也必须以它来接收，列：

MessageBus.addEventListener("updateModelAuditState", ({ groupIds, status }) => {
            //可以先打印接收值
            console.log("groupIds值：" , groupIds);
            console.log("status值：", status);
            treeNodes.forEach(node => {
                if (node && node.children) {
                    recursionSetStatus(node.children, status, groupIds);
                }
            });
        });

总结： 这里和组件之间的传值目的是一样的。一个需要定义传输内容，一个需要接收内容。不同点是这两个不相干的组件没有任何的联系时采用的全局组件方法：使用的是vue3,typeScript的写法。有用则参考