Vue基础教程（117）组件和组合API之子组件向父组件传递数据之监听子组件事件：Vue家那点事儿：子组件“喊妈”指南——$emit事件大揭秘！

一、 从一个家庭矛盾说起……

想象一下，你是一个幸福的家庭（父组件）里的家长。你有一个聪明又有点小个性的孩子（子组件）。你给孩子定规矩、给零花钱（这就是 Props，父传子，天经地义），但孩子长大了，有自己的想法了，他想告诉你：“妈，我想买个新游戏机！”或者“爸，我作业写完了！”，他该怎么办？

他总不能直接翻你的钱包拿钱（子组件直接修改父组件的数据，这是Vue家的大忌！），也不能在你耳边一直念叨（那样太不优雅了）。

最文明、最有效的方式是什么？他写一张小纸条，投进“家庭意见箱”里，然后大声告诉你：“妈，有情况，快看意见箱！”

这个流程，就是Vue中子组件向父组件传递数据的精髓所在。而那个“意见箱”和“大喊一声”的动作，在Vue里有一个共同的名字——自定义事件，核心技术就是 $emit。

二、 核心技术原理：$emit——那个“喊妈”的孩子

$emit 是Vue实例的一个方法，专门用于触发一个自定义事件，并且可以携带一些数据（也就是那张“小纸条”）。

它的工作流程，堪称经典的三步走战略：

1. 子组件“搞事情”：在子组件里，当某个事件发生时（比如按钮点击、输入完成），在对应的处理函数中，调用 this.$emit('事件名', 数据)。这就好比孩子写好了纸条，投进了“意见箱”，然后大喊了一声。
2. 父组件“竖起耳朵”：在父组件模板中使用子组件的地方，用 v-on（或其简写 @）来监听这个自定义事件。这就好比家长听到了孩子的喊声，并且知道了要去处理“意见箱”里的事。
3. 父组件“动手处理”：当父组件监听到这个事件被触发时，会执行一个预先定义好的方法。这个方法的参数，就是子组件传过来的“小纸条”（数据）。

理论有点干巴？来，上硬菜——代码示例！

三、 实战演练：Options API 篇 - “家庭意见箱”

我们先看Vue 2和Options API下的经典写法。

子组件：ChildMessage.vue (一个意见箱)

<template>
  <div class="child">
    <h3>我是孩子，我有话要说！</h3>
    <input type=