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

小黄练编程

1. //app组件
   
2. //
   
3. //
   
4. <template>
   
5. <div id="app">
   
6.   <MyHeader :addtodo='addtodo'></MyHeader>
   
7. <MyList :todolist="todolist"></MyList>
   
8. <MyFooter></MyFooter>
   
9. </div>
   
10. </template>
    
11. 
    
12. <script>
    
13. import  MyFooter  from "./components/MyFooter";
    
14. // import  MyItem  from "./components/MyItem";
    
15. import  MyList  from "./components/MyList.vue";
    
16. import  MyHeader  from "./components/MyHeader.vue";
    
17. export default {
    
18.   name:'App',
    
19.   components:{
    
20.     MyFooter,
    
21.     MyHeader,
    
22.     MyList,
    
23.   },
    
24.   // methods:{
    
25.   //   addtodo(datas){
    
26. 
    
27.   //   }
    
28.   // },
    
29.   data(){
    
30.       return{
    
31.         todolist:[
    
32.                 {id:'001',title:'吃饭',done:false},//这里的false或者ture不能写成字符串形式。否则接受的数据就是一个字符串
    
33.                 {id:'002',title:'打代码',done:true},
    
34.                 {id:'003',title:'练车',done:false},
    
35.             ]
    
36.       }
    
37.   },
    
38.   methods:{
    
39.     addtodo(todoobj){
    
40.       console.log('我是app组件,我收到了数据',todoobj);
    
41.       this.todolist.unshift(todoobj);
    
42.     }
    
43.   }
    
44. }
    
45. 
    
46. </script>
    
47. 
    
48. <style scoped>
    
49. #app{
    
50.   width:300px;
    
51.   height:200px;
    
52.   background-color:bisque;
    
53.   margin: 0 auto;
    
54.   padding-top:10px;
    
55. }
    
56. </style>
    
57. //
    
58. //
    
59. //子组件
    
60. ////
    
61. //
    
62. //
    
63. <template>
    
64. <div id="myfooter">
    
65. <input class="footers" type="text"  placeholder="请输入搜索内容" @keyup.enter="add">
    
66. 
    
67. </div>
    
68. 
    
69. </template>
    
70. 
    
71. <script>
    
72. // import { nanoid } from "nanoid";
    
73. export default  {
    
74.     props:['addtodo'],
    
75.     data(){
    
76.       return {
    
77.             
    
78.          add(e){console.log(this);
    
79.             // console.log(e.target.value);
    
80.             // console.log(e.target);//e.target指的是绑定事件的元素，即文本框。
    
81.             e.target.value='';
    
82.             const todoobj={id:1,title:e.target.value,done:false}
    
83.          this.addtodo(todoobj);//////////////////////问题所在
    
84.             
    
85.          }
    
86.       }
    
87.     },
    
88.    
    
89. }
    
90. </script>
    
91. 
    
92. <style scoped>
    
93. 
    
94. .footers{
    
95.     width:270px;
    
96.     height:20px;
    
97.     margin:0 auto;
    
98.     /* input是行内元素，要想margin:0 auto实现成功，则应该设置其为块级元素*/
    
99.     /* 记住设置为行内块元素是无效 */
    
100.     display:block;
     
101.     /* margin-left:20px; */
     
102. 
     
103. }
     
104. </style>

复制代码