Vue的全局组件通信

遇到的需求是

两个任意的组件，不管是否有关联的组件，都可以直接进行通信

• EventBus：全局事件总线
• Vuex/pinia：参照官网

EventBus，在vue3中不适用。Vue不是一个构造函数，所以我们无法new一个实例出来用监听和发布事件。需要额外安装mitt第三方库来进行组件间的事件分发

安装

yarn add mitt

在main文件中引入

...
import mitt from "mitt";
const emitter = mitt();

...
app.config.globalProperties.emitter = emitter;

在页面中使用

发布：

// 输入框的值
const onSearch = (searchValue) => {
  // console.log("search-value", searchValue);
  this.emitter.emit("search-value", searchValue);
};

接收：

    mounted() {  
        this.emitter.on("search-value", (val) => {  
            console.log(val) 
        });  
    },

在setup中使用

新建useEmitter.js文件

import { getCurrentInstance } from "vue";
export default function useEmitter() {
  const internalInstance = getCurrentInstance();
  const emitter = internalInstance.appContext.config.globalProperties.emitter;
  return emitter;
}

发布：

import useEmitter from "./useEmitter";
const emitter = useEmitter();
// 输入框的值
const onSearch = (searchValue) => {
  // console.log("search-value", searchValue);
  emitter.emit("search-value", searchValue);
};

接收：

import useEmitter from "./useEmitter";
const emitter = useEmitter();
emitter.on("search-value", (val) => {  
    console.log(val) 
});