为何报错，这代码是vue脚手架写的
//子组件
//
//
//
<template>
<div id="myfooter">
<input class="footers" type="text"placeholder="请输入搜索内容" @keyup.enter="add">
</div>
//
//app组件
//
//
<template>
<div id="app">
<MyHeader :addtodo='addtodo'></MyHeader>
<MyList :todolist="todolist"></MyList>
<MyFooter></MyFooter>
</div>
</template>
<script>
importMyFooterfrom "./components/MyFooter";
// importMyItemfrom "./components/MyItem";
importMyListfrom "./components/MyList.vue";
importMyHeaderfrom "./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>
<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>
页:
[1]