一、主要vue文件梳理

App.vue

<to-do-form>监听：

todo-added事件当表单被提交时通过ToDoForm组件中的onSubmit()方法被回调到父组件app.vue

<to-do-item>监听：

checkbox-changed事件是从ToDoItem组件中的input标签被选中或取消的时候触发回调到app.vue
当按下“Delete”按钮时，由ToDoItem组件内部的deleteToDo()方法发出的item-deleted事件。结果:调用deleteToDo()方法删除关联的todo项。
当ToDoItemEditForm内部的onSubmit()方法发出的item-edited事件被成功监听时，ToDoItem组件内部的itemEdited()方法发出item-edited事件。最后在app.vue中调用editToDo()方法来更新关联的todo项目的标签。

<template>
  <div id="app">
    <!-- <img alt="Vue logo" src="./assets/logo.png"> -->
    <!-- <HelloWorld msg="Welcome to Your Vue.js App"/> -->
    <h1>To-Do List</h1>
    <to-do-form @todo-added="addToDo"></to-do-form>
    
    <h2 id="list-summary">{{listSummary}}</h2>

    <ul aria-labelledby="list-summary" class="stack-large">
      <li v-for="item in ToDoItems" :key="item.id">
        <!--  @checkbox-changed="updateDoneStatus(item.id)"> 使状态实时改变-->
        <to-do-item :label="item.label" :done="item.done" :id="item.id" @checkbox-changed="updateDoneStatus(item.id)"
        @item-deleted="deleteToDo(item.id)" @item-edited="editToDo(item.id, $event)"></to-do-item>
      </li>
    </ul>
  </div>
</template>

ToDoForm.vue

<form>监听submit事件。结果:onSubmit()方法被调用，它检查新标签是否为空，然后发出todo-added事件(然后在App.vue中被监听，见上面)，最后清除新标签<input>。

<template>
<!-- 用v-on:event="method"实现方法的绑定，
再用事件修饰符阻止向服务器发送请求 -->
  <form @submit.prevent="onSubmit">
    <h2 class="label-wrapper">
      <label for="new-todo-input" class="label__lg">
            What needs to be done?
      </label>
    </h2>
    <!-- 向输入框使用v-model="variable"
    使设置的属性与input输入同步 -->
    <!--使用lazy和trim修饰符改变v-model的行为-->
    <input
      type="text"
      id="new-todo-input"
      name="new-todo"
      autocomplete="off"
      v-model.lazy.trim="label"
      class="input__lg"
    />
    <button type="submit" class="btn btn__primary btn__lg">
      Add
    </button>
  </form>
</template>

ToDoItem.vue

复选框<input>监听change事件。结果:当复选框被选中/未选中时，checkbox-changed事件被触发(然后在App.vue内部被监听)。
“Edit” <button>监听click事件。结果:调用toggleToItemEditForm()方法进行切换。isEditing为true，在重新渲染时显示todo项的编辑表单。
“Delete” <button>监听click事件。结果:deleteToDo()方法被调用，它发出项目删除事件(然后在App.vue内部被监听)

<to-do-item-edit-form>监听

当表单成功提交时，由ToDoItemEditForm组件内的onSubmit()方法发出item-edited事件。
结果:ToDoItem.vue中itemEdited()方法被调用，它发出item-edited的事件(然后在App.vue中侦听)，并设置this.isEditing返回false，这样编辑表单在重新渲染时不再显示。
当单击“Cancel”按钮时，由ToDoItemEditForm组件内的onCancel()方法触发edit-cancelled事件。
结果:ToDoItem.vue中editCancelled()方法被调用，它会设置this.isEditing返回false，这样编辑表单在重新渲染时不再显示。

ToDoItemEditForm.vue

<form>监听submit事件。结果:调用onSubmit()方法，该方法检查新标签值是否为空，是否与旧标签值相同，如果是，则发出item-edited事件
“Cancel” <button>监听click事件。结果:onCancel()方法被调用，它触发edit-cancelled事件

二、要点总结

emit用来向父组件传值：在vue中，$emit用于触发当前实例上的事件，附近参数都会传给监听器回调；子组件可以利用$emit触发父组件的自定义事件，语法为vm.$emit( event, […args] )
v-bind将JavaScript表达式绑定到HTML元素：v-bind:attribute="expression" 可以直接用：缩写
用v-on:event="method"实现方法的绑定，可以直接用@缩写
使用v-model="variable"实现表单输入和应用状态（变量）之间的双向绑定

<!-- 向输入框使用v-model="variable"
使设置的属性与input输入同步 -->
<!--使用lazy和trim修饰符改变v-model的行为-->
<input
  type="text"
  id="new-todo-input"
  name="new-todo"
  autocomplete="off"
  v-model.lazy.trim="label"
  class="input__lg"
/>