为何子组件中的this报错，用vue脚手架写的

小黄练编程

//app组件
//
//
<template>
<div id="app">
  <MyHeader :addtodo='addtodo'></MyHeader>
<MyList :todolist="todolist"></MyList>
<MyFooter></MyFooter>
</div>
</template>

<script>
import  MyFooter  from "./components/MyFooter";
// import  MyItem  from "./components/MyItem";
import  MyList  from "./components/MyList.vue";
import  MyHeader  from "./components/MyHeader.vue";
export default {
  name:'App',
  components:{
    MyFooter,
    MyHeader,
    MyList,
  },
  // methods:{
  //   addtodo(datas){

  //   }
  // },
  data(){
      return{
        todolist:[
                {id:'001',title:'吃饭',done:false},//这里的false或者ture不能写成字符串形式。否则接受的数据就是一个字符串
                {id:'002',title:'打代码',done:true},
                {id:'003',title:'练车',done:false},
            ]
      }
  },
  methods:{
    addtodo(todoobj){
      console.log('我是app组件,我收到了数据',todoobj);
      this.todolist.unshift(todoobj);
    }
  }
}

</script>

<style scoped>
 #app{
  width:300px;
  height:200px;
  background-color:bisque;
  margin: 0 auto;
  padding-top:10px;
 }
</style>
//
//
//子组件
////
//
//
<template>
<div id="myfooter">
<input class="footers" type="text"  placeholder="请输入搜索内容" @keyup.enter="add">

</div>

</template>

<script>
// import { nanoid } from "nanoid";
export default  {
    props:['addtodo'],
    data(){
      return {
            
         add(e){console.log(this);
            // console.log(e.target.value);
            // console.log(e.target);//e.target指的是绑定事件的元素，即文本框。
            e.target.value='';
            const todoobj={id:1,title:e.target.value,done:false}
         this.addtodo(todoobj);//////////////////////问题所在
            
         }
      }
    },
   
}
</script>

<style scoped>

 .footers{
    width:270px;
    height:20px;
    margin:0 auto;
    /* input是行内元素，要想margin:0 auto实现成功，则应该设置其为块级元素*/
    /* 记住设置为行内块元素是无效 */
    display:block;
    /* margin-left:20px; */

 }
</style>