vue3中跨组件通信方式

（只提供思路，具体的用法可自行百度）

1.依赖注入

provide—inject

2.属性穿透

也依赖于provide-inject
vue中默认穿透的属性有style、class、key，如果子组件也存在class、style,则会自动合并class、style,
如果你的子组件是根组件时，也可以省略v-bind=“$attrs”

父：
provide("count",{count,updateMethod})
子：
<孙 v-bind="$atrrs">
孙：
const {count,updateMethod}=inject("count")

3.使用pinia状态库维护

4.事业总线（组合式API不支持）

$emit(“update”)
emits:[“update”]

5.自定义事件

class EventBus {
  constructor() {
    this.events = {};
  }

  // 订阅事件
  on(eventName, callback) {
    if (!this.events[eventName]) {
      this.events[eventName] = [];
    }
    this.events[eventName].push(callback);
  }

  // 发布事件
  emit(eventName, eventData) {
    const eventCallbacks = this.events[eventName];
    if (eventCallbacks) {
      eventCallbacks.forEach(callback => {
        callback(eventData);
      });
    }
  }

  // 取消订阅事件
  off(eventName, callback) {
    const eventCallbacks = this.events[eventName];
    if (eventCallbacks) {
      this.events[eventName] = eventCallbacks.filter(cb => cb !== callback);
    }
  }
}

export const eventBus = new EventBus()