vue3 兄弟组件间通信

在Vue3中，兄弟组件通信有两种方式。第一种是通过父组件来传值的方式，即先把值传给父组件，再通过父组件传给另一个子组件，但是这种方式非常麻烦。第二种方式是通过获取子组件的实例来调用子组件的方法，具体步骤如下：

1.在子组件中，将需要暴露给父组件的方法或属性通过defineExpose()方法暴露出来。

2.在父组件中，使用ref获取子组件的实例。

3.在父组件中，定义一个变量来存储获取到的子组件实例。

4.通过定义的变量来调用子组件的方法或属性。

另外，兄弟组件间的通信还可以通过统一规范写法的方式来实现，具体步骤如下：

1.在父组件中直接在子组件标签上绑定属性和值，来传递到子组件。

2.在子组件中通过defineProps()方法来接收传递过来的属性，并给其定义类型再用withDefaults()方法是为了在不传递的时候给其一个默认值。

3.通过定义的变量来调用子组件的方法或属性。

--相关问题--:

相关问题

vue3兄弟组件间通信

在Vue3中，实现兄弟组件间通信的方法可以通过以下几种方式:

1. 使用事件总线：可以使用Vue3的新特性provide和inject来创建全局事件总线，使得兄弟组件能够进行通信。父组件通过provide提供数据或方法，然后在子组件中使用inject来获取父组件提供的内容。这样兄弟组件之间就可以通过事件总线进行通信了。

2. 使用共享状态：可以在父组件中定义一个共享的状态，然后通过provide和inject将这个状态传递给兄弟组件。兄弟组件可以通过读取或修改这个共享状态来实现通信。

3. 使用第三方库或插件：除了以上两种方法，还可以使用一些第三方库或插件来实现兄弟组件间的通信。这些库或插件提供了更多的功能和选项，可以根据具体需求选择适合的库来解决通信问题。

需要注意的是，在Vue3中，父组件获取子组件的数据或方法需要通过defineExpose对外暴露，因为Vue3中组件内部的数据对外是"关闭的"，外部不能直接访问。反过来，子组件也可以通过$parent来获取父组件实例。

通过以上方法，可以实现Vue3兄弟组件间的通信，使得它们能够在没有直接父子关系的情况下进行数据传递和方法调用。<span class="em">1</span><span class="em">2</span><span class="em">3</span><span class="em">4</span>

VUE3-组件间通信

### Vue3 组件间通信方法与最佳实践

#### 使用 `props` 和 `$emit`

在父组件向子组件传递数据时，可以利用 `props` 属性。相反地，在子组件需要通知父组件某些事件发生时，则可以通过调用 `$emit()` 来触发自定义事件[^1]。

<!-- ParentComponent.vue -->
<template>
  <ChildComponent :message="parentMessage" @childEvent="handleChildEvent"/>
</template>

<script setup>
import { ref } from 'vue';
const parentMessage = "Hello Child";
function handleChildEvent(data){
    console.log(`Received data from child component: ${data}`);
}
</script>

<!-- ChildComponent.vue -->
<template>
  <div>{{ message }}</div>
  <button @click="$emit('childEvent', 'Data to send')">Emit Event</button>
</template>

<script setup>
defineProps({
  message: String,
});
</script>

#### 利用 Composition API 提供依赖注入 (`provide/inject`)

对于跨多层嵌套的祖孙关系之间共享状态的情况，Composition API 下的新版 `provide`/`inject` 可以更方便地管理这种深层次的数据流[^2]。

// App.vue (GrandParent Component)
export default {
  setup() {
    const sharedState = reactive({ count: 0 });
    
    provide('sharedState', readonly(sharedState));
    
    return {};
  }
};

// SomeDeeplyNestedChild.vue
setup(){
  const sharedState = inject('sharedState');
  
  watch(() => sharedState.count, () => {
      console.log("Shared state changed:", sharedState);
  });

  return { sharedState };
}

#### 应用全局事件总线或第三方库如 `mitt`

当面临非父子级联结构下的兄弟节点或其他任意位置组件间的通讯需求时，可考虑引入轻量级的消息订阅发布机制——比如官方推荐之外的选择 `mitt` 或者创建简单的全局事件中心对象。

npm install mitt

// eventBus.ts
import mitt from 'mitt';

const emitter = mitt();

export default emitter;

// SenderComponent.vue
emitter.emit('custom-event-name', payload);

// ReceiverComponent.vue
onMounted(() => {
  emitter.on('custom-event-name', handlerFunction);
});

onUnmounted(() => {
  emitter.off('custom-event-name', handlerFunction);
});