学习内容：VUE2 TODOLIS案例添加功能
今天我学习了TODOLIS案例的添加功能，因为没有学习过全局事件总线，订阅消息，Vuex等知识，所以这里我使用基础的方法来实现TODOLIS案例的添加功能。
初始化的数据内容todos:[...]原本是存放在List组件当中，添加内容的功能是由Header组件实现的，但是Header组件并不能将想添加的内容存放到List组件之中。（Header和List为兄弟组件） 因此，我将数据内容todos:[...]放到App组件中，利用v-bind语法将todos:[...]绑定在List组件标签中，在List子组件配置props配置项，以接收数据。
现在，我们就需要实现将我们想添加的内容放置到数据todos:[...]当中。我们从上图可以看到，要想实现将Header组件的东西，添加到App组件当中，需要有一条APP到Header虚线。
这里的虚线我们在App组件中配置一个方法来实现。我们将方法绑定到Header组件标签，在Header子组件中配置props配置项。接着调用这个方法，将想要添加的内容newtodo作为参数传入到App中的方法上，App接收到参数，并将参数（添加的内容）放入数据todos:[...]中即可。
App组件代码块：
<template>
<div id="root">
<div class="todo-container">
<div class="todo-wrap">
<MyHeader :addTodo="addTodo"></MyHeader>
<MyList :todos="todos"></MyList>
<Myfooter></Myfooter>
</div>
</div>
</div>
</template>
<script>
import MyHeader from './components/MyHeader'
import MyList from './components/MyList'
import Myfooter from './components/Myfooter'
export default {
name:"App",
components:{
MyHeader,
MyList,
Myfooter
},
data() {
return {
todos:[
{id:"001",content:"操作系统40分钟",complate:false},
{id:"002",content:"Vue40分钟",complate:true},
{id:"003",content:"计算机网络40分钟",complate:false},
{id:"004",content:"数据库40分钟",complate:true},
]
}
},
methods:{
addTodo(id){
console.log("我是App组件,我收到了",id);
this.todos.unshift(id)
}
}
}
</script>
Header代码块：
<template>
<div class="todo-header">
<input type="text" placeholder="请输入你的任务名称，按回车键确认" @keyup.enter="add" v-model="content" />
</div>
</template>
<script>
import {nanoid} from "nanoid";
export default {
name:"MyHeader",
methods:{
add(){
if(!this.content.trim())
return alert("输入不能为空");
const newtodo={
id:nanoid(),
content:this.content,
complate:false
};
this.addTodo(newtodo);
this.content='';
}
},
data() {
return {
content:""
}
},
props:["addTodo"]
}
</script>
List代码块：
<template>
<ul class="todo-main">
<MyItem v-for="todoobj in todos" :key="todoobj.id" :todomsg="todoobj"></MyItem>
</ul>
</template>
<script>
import MyItem from './MyItem.vue'
export default {
name:"MyList",
components:{
MyItem
},
props:["todos"]
}
</script>
