递归组件实现子向父传值

业务逻辑：通过自己调用自己的方式生成树，再点击子菜单时，需要将点击子菜单的菜单名传值给父组件（使用总线 bus）

 新建bus.js文件

import { ref } from 'vue'class Bus {constructor() {// 收集订阅信息,调度中心this.eventList = {}, // 事件列表，这项是必须的// 下面的都是自定义值this.msg = ref('这是一条总线的信息')}// 订阅
  $on(name, fn) {this.eventList[name] = this.eventList[name] || []this.eventList[name].push(fn)}// 发布
  $emit(name, data) {if (this.eventList[name]) {this.eventList[name].forEach((fn) => {fn(data)});}}// 取消订阅
  $off(name) {if (this.eventList[name]) {delete this.eventList[name]}}
}export default new Bus()

 父组件引入

<script>
// import roomMenuData from "@/data/RoomMenuData"; //左侧菜单数据
import leftMenu from "@/components/leftMenu.vue"; //引用递归菜单组件
var roomMenuDataL; //后台获取教室数据
var message = "";
import Bus from "@/mytools/Bus";
// 监听菜单点击返回值（//左侧菜单点击事件）
Bus.$on("changeMsg", (data) => {message= data;console.error(data);console.error("菜单数据");
});
</script>

子组件

<template><div>子组件：<button @click="handleBusEmit">触发Bus.$emit</button><button @click="changeBusMsg">修改总线里的 msg</button></div>
</template><script setup>
import Bus from '../Bus.js'function handleBusEmit() {Bus.$emit('changeMsg', '雷猴啊')
}function changeBusMsg() {// console.log(Bus.msg)Bus.msg.value = '在子组件里修改了总线的值'
}
</script>