Vue组件：使用$emit()方法监听子组件事件

1、监听自定义事件

父组件通过使用 Prop 为子组件传递数据，但如果子组件要把数据传递回去，就需要使用自定义事件来实现。父组件可以通过 v-on 指令（简写形式"@"）监听子组件实例的自定义事件，而子组件可以通过调用内建的 $emit() 方法并传入事件名称来触发自定义事件。

组件之间的数据传递：

父传子：使用 Props 属性。

子传父：使用 $emit() 方法。

$emit() 方法的语法格式如下：

this.$emit( eventName, [...args] )

参数说明：

eventName：传入事件的名称。

...args\]：触发事件传递的参数，该参数是非必选。 **【实例】**使用$emit()方法，实现子组件向父组件传递事件。 **（1）创建 ParentComponent.vue 父组件** ```html ``` **（2）创建 ChildComponent.vue 子组件** ```html ``` **（3）在 App.vue 根组件中，引入父组件** ```html ``` **执行结果：**  ## 2、组件事件配合 v-model 指令 如果是在子组件中用户输入数据，我们希望在获取数据的同时发生数据给父组件，这是可以配合 v-model 指令使用。 **【实例】**子组件中用户输入数据，在父组件中实时获取数据。 **（1）修改 ParentComponent.vue 父组件** ```html ``` **（2）修改 ChildComponent.vue 子组件** ```html ``` **执行结果：**