两种方案

1.借助父组件传参

例如父组件为App 子组件为A 和 B他两个是同级的

  1. <template>
  2.     <div>
  3.         <A @on-click="getFalg"></A>
  4.         <B :flag="Flag"></B>
  5.     </div>
  6. </template>
  8. <script setup lang='ts'>
  9. import A from './components/A.vue'
  10. import B from './components/B.vue'
  11. import { ref } from 'vue'
  12. let Flag = ref<boolean>(false)
  13. const getFalg = (flag: boolean) => {
  14.    Flag.value = flag;
  15. }
  16. </script>
  18. <style>
  19. </style>

A 组件派发事件通过App.vue 接受A组件派发的事件然后在Props 传给B组件 也是可以实现的
缺点就是比较麻烦 ，无法直接通信，只能充当桥梁

2.Event Bus

我们在Vue2 可以使用$emit 传递 $on监听 emit传递过来的事件
这个原理其实是运用了JS设计模式之发布订阅模式
我写了一个简易版

  2. type BusClass<T> = {
  3.   emit: (name: T) => void
  4.   on: (name: T, callback: Function) => void
  5. }
  6.   type BusParams = string | number | symbol 
  7. type List = {
  8.   [key: BusParams]: Array<Function>
  9. }
  10.   class Bus<T extends BusParams> implements BusClass<T> {
  11.   list: List
  12.   constructor() {
  13.     this.list = {}
  14.   }
  15. emit(name: T, ...args: Array<any>) {
  16.   let eventName: Array<Function> = this.list[name]
  17.   eventName.forEach(ev => {
  18.     ev.apply(this, args)
  19.   })
  20. }
  21. on(name: T, callback: Function) {
  22.   let fn: Array<Function> = this.list[name] || [];
  23.   fn.push(callback)
  24.   this.list[name] = fn
  25. }
  26. }
  28. export default new Bus<number>()

然后挂载到Vue config 全局就可以使用啦
————————————————
版权声明：本文为CSDN博主「小满zs」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/qq1195566313/article/details/123158620