Vue3 父组件与子组件互动

Vue3：父组件与子组件互动指南

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

在Vue3中，可以通过props属性将数据从父组件传递给子组件。

首先，在父组件中定义需要传递的数据：

```

```

在上述代码中，父组件通过属性绑定(:message)将message数据传递给子组件。

然后，在子组件中接收props传递的数据：

```

```

子组件通过props属性接收父组件传递的数据，在模板中可以直接使用。

2. 子组件向父组件传递数据

在Vue3中，子组件向父组件传递数据需要使用自定义事件。

首先，在子组件中定义一个方法，用于触发自定义事件并传递数据：

```

```

在上述代码中，子组件通过$emit方法触发名为message的自定义事件，并传递了一条消息。

然后，在父组件中监听子组件的自定义事件，并处理接收到的数据：

```

```

父组件通过@message监听子组件的自定义事件，并在handleMessage方法中接收子组件传递的数据。

3. 兄弟组件之间传递数据

在Vue3中，兄弟组件之间传递数据需要借助一个共享的祖先组件。

首先，在共享的祖先组件中定义需要传递的数据，并通过provide方法提供给子孙组件：

```

```

在上述代码中，共享的祖先组件使用provide方法提供了一个名为sharedData的数据。

然后，在兄弟组件中使用inject方法接收共享的数据：

```

```

兄弟组件通过inject方法接收共享的数据，在模板中可以直接使用。

4. 使用事件总线进行组件间通信

在Vue3中，可以使用事件总线实现组件间的通信。我们可以通过创建一个中央事件总线实例来实现这一目的。

首先，在main.js中创建中央事件总线实例：

```

import { createApp } from 'vue';

const app = createApp(App);

app.config.globalProperties.$bus = new app;

app.mount('#app');

```

然后，在需要通信的组件中分别触发和监听事件：

```

// 发送事件的组件

this.$bus.emit('event-name', data);

// 接收事件的组件

this.$bus.on('event-name', (data) => {

// 处理接收到的数据

});

```

通过this.$bus.emit方法发送事件，并通过this.$bus.on方法监听事件并处理接收到的数据。

以上就是Vue3中父组件与子组件互动的几种常用方式，通过props传递数据、通过自定义事件进行数据传递、通过共享祖先组件传递数据以及使用中央事件总线进行组件间通信可以满足不同场景下的需求。