递归组件实现子向父传值

业务逻辑：通过自己调用自己的方式生成树，再点击子菜单时，需要将点击子菜单的菜单名传值给父组件（使用总线 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>