两种方案
1.借助父组件传参
例如父组件为App 子组件为A 和 B他两个是同级的
<template> <div> <A @on-click="getFalg"></A> <B :flag="Flag"></B> </div> </template> <script setup lang='ts'> import A from './components/A.vue' import B from './components/B.vue' import { ref } from 'vue' let Flag = ref<boolean>(false) const getFalg = (flag: boolean) => { Flag.value = flag; } </script> <style> </style>
A 组件派发事件通过App.vue 接受A组件派发的事件然后在Props 传给B组件 也是可以实现的
缺点就是比较麻烦 ，无法直接通信，只能充当桥梁
2.Event Bus
我们在Vue2 可以使用$emit 传递 $on监听 emit传递过来的事件
这个原理其实是运用了JS设计模式之发布订阅模式
我写了一个简易版
type BusClass<T> = { emit: (name: T) => void on: (name: T, callback: Function) => void } type BusParams = string | number | symbol type List = { [key: BusParams]: Array<Function> } class Bus<T extends BusParams> implements BusClass<T> { list: List constructor() { this.list = {} } emit(name: T, ...args: Array<any>) { let eventName: Array<Function> = this.list[name] eventName.forEach(ev => { ev.apply(this, args) }) } on(name: T, callback: Function) { let fn: Array<Function> = this.list[name] || []; fn.push(callback) this.list[name] = fn } } export default new Bus<number>()
然后挂载到Vue config 全局就可以使用啦
