vue3兄弟组件调用方法

在 Vue 3 中，兄弟组件之间的通信可以通过事件总线或者 provide/inject 来实现。以下是两种方法的示例：

1. 事件总线：
在父组件中创建一个事件总线，子组件通过事件总线来通信。

父组件：

// 创建事件总线
const eventBus = new Vue();

export default {
  // ...
  methods: {
    emitEvent() {
      // 发送事件
      eventBus.$emit('event-name', data);
    }
  }
}

兄弟组件1：

export default {
  // ...
  created() {
    // 监听事件
    eventBus.$on('event-name', this.handleEvent);
  },
  methods: {
    handleEvent(data) {
      // 处理事件
    }
  }
}

兄弟组件2：

export default {
  // ...
  created() {
    // 监听事件
    eventBus.$on('event-name', this.handleEvent);
  },
  methods: {
    handleEvent(data) {
      // 处理事件
    }
  }
}

2. provide/inject：
使用 provide/inject 来共享数据或方法，实现兄弟组件的通信。

父组件：

export default {
  provide() {
    return {
      methodName: this.methodName
    };
  },
  methods: {
    methodName() {
      // 方法逻辑
    }
  }
}

兄弟组件1：

export default {
  inject: ['methodName'],
  // ...
  created() {
    // 调用父组件的方法
    this.methodName();
  }
}

兄弟组件2：

export default {
  inject: ['methodName'],
  // ...
  created() {
    // 调用父组件的方法
    this.methodName();
  }
}

以上两种方法都可以实现兄弟组件之间的调用。根据你的具体需求，选择适合的方式来实现兄弟组件的通信。