Vue3组件通讯六种方式

在 Vue3 中，有以下六种常见的组件通讯方式：

一、父组件向子组件传递数据（Props 传递）

父组件通过在子组件标签上添加属性的方式，将数据传递给子组件。子组件在定义时通过props选项接收这些数据。

二、子组件向父组件传递数据（自定义事件）

子组件通过$emit方法触发自定义事件，并将数据作为参数传递给父组件，父组件通过在子组件标签上监听相应的事件来接收数据。

三、兄弟组件通讯（通过共同的父组件或状态管理库）

1. 共同的父组件：兄弟组件可以通过共同的父组件来中转数据。
2. 状态管理库：如 Vuex，将数据存储在全局状态中，让兄弟组件都能访问和修改。

四、跨层级组件通讯（事件总线）

创建一个全局的事件总线，组件可以通过它来发送和接收事件，实现跨层级的通讯。

五、依赖注入（Provide / Inject）

父组件通过provide提供数据，子组件通过inject来注入接收这些数据。

六、插槽传递数据

父组件可以通过插槽将数据传递给子组件，子组件可以在插槽内容中获取这些数据。

示例

1. 父组件向子组件传递数据：

<ChildComponent :message="parentMessage" />

子组件接收：

defineProps(['message'])

1. 子组件向父组件传递数据：

this.$emit('customEvent', data);

父组件监听：

<ChildComponent @customEvent="handleEvent" />

1. 兄弟组件通过共同父组件通讯：

父组件作为中转：

<ChildComponent1 @customEvent="handleEventFromChild1" />
<ChildComponent2 @customEvent="handleEventFromChild2" />

1. 跨层级组件通讯（事件总线）：

const eventBus = new Vue();

// 发送事件
eventBus.$emit('eventName', data);

// 接收事件
eventBus.$on('eventName', (data) => {
   
  // 处理数据
});

1. 依赖注入：

父组件提供：

provide('data', someData);

子组件注入：

defineInject(['data'])

1. 插槽传递数据：

父组件：

<ChildComponent>
  <span>{
  { slotData }}</span>
</ChildComponent>

子组件接收：

<slot />

以上是 Vue3 中常见的组件通讯方式，根据具体的场景和需求，选择合适的通讯方式可以使组件之间的协作更加顺畅，提高开发效率和代码的可读性。