Vue3基础(23)___vue3非父子组件之间的通信

父子传值可以看这个：

Vue3基础(十san)___父子组件通信___props、emit___provide、inject

非父子传值：

写一个事件集合对象，并写模拟触发函数、监听函数：
evnetList：事件集合对象数组；
name：每一个事件的标识；
callbackFun：回调函数；

const eventObj = {
    evnetList: [],
    on(callbackFun, name) {
        this.evnetList.push({
            name,
            callbackFun
        })
    },
    emit(name, data) {
        this.evnetList.forEach(element => {
            if (name === element.name) {
                element.callbackFun(data)
            }
        });
    }
}
export default eventObj

        

          
        
        
        

          

          AI 代码解读
        
      
      

组件A触发事件:

import eventFun from "@/eventFun";
eventFun.emit("changeUsernameP",'我是组件A传递的参数字符串')

        

          
        
        
        

          

          AI 代码解读
        
      
      

组件B：监听事件

import eventFun from "@/eventFun";
import {  onMounted } from "vue";
    onMounted(() => {
      eventFun.on((str) => {
        console.log(str);
        //触发事件后的具体操作...
         ......
      }, "changeUsernameP");
    });

        

          
        
        
        

          

          AI 代码解读