为何报错，这代码是vue脚手架写的

小黄练编程

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

复制代码