第一部分：子组件部分

MyHeader.vue组件

<template>
  <div class="todo-header">
      <!-- @keyup.enter="add" 创建keyup键盘事件 回车即添加数据 -->
      <!-- 这里可以使用v-model="titelle"采用 双向绑定，让data内部的变量收集数据 -->
    <input type="text" placeholder="请输入你的任务名称，按回车键确认"  @keyup.enter="add($event)"/>
  </div> 
</template>

<script>
// 这里引入 单向操作数据id值不同
import {nanoid} from 'nanoid'
export default {
  name: "MyHeader",
//   data(){
//    return{
    // titelle:'',
//    }
//   },
// 接收App父组件传来的数据
  // props:['addtodo'],
  methods:{
    //对数据回车列入li标签中的数据进行回车事件绑定  将回车后的数据创建成对象的形式
      add(e) {
     // 将用户的输入包装成一个todo对象     第一个id值   第二个获取的是输入的内容   第三个四判断是否选中了
      const todoObj = {id:nanoid(),title:e.target.value,done:false}
    //将创建好的对象传给App  这里是自定义组件(第一个是父组件绑定的事件名，第二个是传给的数据)
      this.$emit('addtodo',todoObj)
    //   创建好并且也传了，后面就让输入框内清空
      e.target.value=''
      }
  }
};
</script>

<style scoped>
/*header*/
.todo-header input {
  width: 560px;
  height: 28px;
  font-size: 14px;
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 4px 7px;
}
.todo-header input:focus {
  outline: none;
  border-color: rgba(82, 168, 236, 0.8);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075),
    0 0 8px rgba(82, 168, 236, 0.6);
}
</style>
<template>