vue3中兄弟组件方法调用

在Vue3项目开发过程中，当涉及到兄弟组件之间的方法调用时，有多种解决方案。其中比较常用且有效的方式是借助provide和inject、通过父组件中转以及使用mitt等事件总线工具。

一、借助provide和inject

这种方式适合在一个相对独立的功能模块中使用。在父组件中，将需要共享的方法通过provide提供出去。
```vue
// 父组件Parent.vue

import { provide } from 'vue'
import BrotherA from './BrotherA.vue'
import BrotherB from './BrotherB.vue'

const sharedMethod = () => {
console.log('shared method')
}

provide('sharedMethod', sharedMethod)

</p>

<p>然后在兄弟组件中，通过inject来获取这个方法。
```vue
// 兄弟组件BrotherA.vue

  <div>
    <button>Call Shared Method in A</button>
  </div>
</p>


import { inject } from 'vue'

const sharedMethod = inject('sharedMethod')

const callSharedMethod = () => {
  sharedMethod()
}


<p>

二、通过父组件中转

当兄弟组件之间交互较为复杂时，可以通过父组件进行中转。先在父组件定义一个方法，在子组件中通过$emit触发父组件的自定义事件，再由父组件调用另一个子组件的方法或者向其传递参数。

父组件：
```vue

import { ref } from 'vue'
import BrotherA from './BrotherA.vue'
import BrotherB from './BrotherB.vue'

const brotherBRef = ref(null)

const handleCustomEvent = (data) => {
brotherBRef.value.brotherBMethod(data)
}

</p>

<p>兄弟组件A：
```vue

  <div>
    <button>Trigger Event in A</button>
  </div>
</p>


const emit = defineEmits(['customEvent'])

const triggerCustomEvent = () => {
  emit('customEvent', 'some data')
}


<p>

兄弟组件B：
```vue

defineExpose({
brotherBMethod(data) {
console.log('Brother B method called with:', data)
}
})

</p>

<h2><h2>三、使用mitt事件总线</h2></h2>

<p>如果项目中存在多个组件之间的通信需求，并且不想让组件之间耦合度太高，可以引入mitt这个轻量级的事件总线库。安装mitt：<code>npm install mitt。


创建一个事件总线文件bus.js：
javascript
import mitt from 'mitt'
const bus = mitt()
export default bus


在需要发送事件的兄弟组件中：
```vue

  

    Send Event in A
  



import bus from './bus'

const sendEvent = () => {
  bus.emit('my-event', 'event data')
}

在接收事件的兄弟组件中：
```vue

import bus from './bus'
import { onMounted, onUnmounted } from 'vue'

onMounted(() => {
bus.on('my-event', (data) => {
console.log('Received event data:', data)
})
})

onUnmounted(() => {
bus.all.clear() // 清除事件监听，防止内存泄漏
})

```

以上就是在Vue3中实现兄弟组件方法调用的几种思路，开发者可以根据具体的业务场景选择合适的方式。