vue2.x 父组件监听子组件事件并传回信息的方法

Vue 2.x 父组件监听子组件事件并传回信息的交互方法详解

在 Vue 2.x 中，我们经常需要在父组件中监听子组件的事件，并接收子组件传递回来的信息。这样的交互对于组件间的通信至关重要。下面，我们将详细介绍如何实现这一过程。

一、使用 vm.$emit 实现子组件向父组件传递信息

1. 在父组件中引用子组件：

```html

```

这里的 `@from-child-msg` 是子组件触发的事件名称，`listenChildMsg` 是父组件中定义的方法。

2. 在子组件中使用 $emit 发送事件：

```javascript

this.$emit('from-child-msg', '这是子组件传递的消息');

```

当子组件中的某个事件被触发时（例如按钮点击），可以使用 `$emit` 发送一个自定义事件，并携带数据。

二、实例演示

下面是一个简单的 HTML 和 Vue 实例，展示了父组件如何监听子组件事件并接收信息。

```html