vue3兄弟组件传值

在当前组件下新建一个文件Bus.js:

//emit作为发布(传递)，on作为订阅(接收)
class Bus {
    
    
  constructor() {
    
    
    // 初始化list
    this.list = {
    
    }
  }
  // 发布事件,..
  emit(name, ...args) {
    
    
    // 获取到list里的数据
    let evnentName = this.list[name]
    evnentName.forEach(fn => {
    
    
      fn.apply(this, args)
    })
  }
  // 接收事件
  on(name, callback) {
    
    
    // 如果是第一次注册，则为空；如果被多次注册，则采用之前注册的名字
    let fn = this.list[name] || []
    fn.push(callback)
    this.list[name] = fn
  }
}
// 导出bus
export default new Bus()

第一个组件中使用：

<template>
  <div class="sider_header">
    <div v-for="(item, index) in navList" :key="index" @click="changeNav(index, item.id)">
      {
    
    {
    
     item.label }}
    </div>
  </div>
</template>

<script setup>
import Bus from "./Bus";

const changeNav = (index, id) => {
    
    
  // 通过Bus发布出去一个'changeNav'事件，并携带参数
  Bus.emit("changeNav", id);
};
</script>

另一个组件中使用：

<script setup>
import Bus from "./Bus";
// 接收siderHeader组件传过来的值
Bus.on("changeNav", (id) => {
    
    
 //这里根据自己业务写代码
});
</script>