Vue实现简易TodoList

TodoList案例

（省略样式部分）

分析

分为四个组件 Header List Item Footer

App.vue

功能实现：

1.Header部分

按回车键后添加内容todoObj，内容应添加进List部分，兄弟间不可传数据，将todos中内容放置在父组件App中，通过子组件Header向父组件App中传递todoObj来实现新内容的添加。

此处涉及子向父传数据，该案例使用最基础的方法，父先向子传入一个函数（addTodo），子组件通过props数组接收。子组件再调用这个函数实现子向父传递。

Header.vue

注： 在为新添加的内容生成唯一id时使用nanoid方法，需要先引入。

2.List部分

将App中todos传给List进行渲染，将todoObj传给Item。

List.vue

3.Item部分

① 标记勾选或取消勾选一个todo，改变done的值（通过id：向App组件传id => 子向父传数据），在子组件中勾选或取消勾选 可以通过@change或@click调用函数。

需要App组件向该组件传入相应函数（checkTodo <=> 在App组件中编写的改变done值的函数），即需要App先向List组件传函数，再由List组件向Item组件传函数。

② 点击删除按钮实现删除某一todo，通过id值确定删除的内容。实现过程与上述类似。

Item.vue

4.Footer部分

① 全部todo数，采用计算属性（即todos数组的长度）

② 已完成todo的个数，采用计算属性，使用数组方法reduce => 迭代数组，把它累积到一个值中

reduce(回调函数(pre,current){},初始值)

注： 数组长度是多少 函数调用多少次

初始pre为统计数0，current为正在处理项

例如：

this.todos.reduce((pre,current)=>{   012
	console.log('@',pre)             012
	return pre+1                     123
},0)

在回调函数中：

• 上一次的返回值为下一次的pre值

• 控制台上输出为012

• 最后一次返回值为3

最后一次返回值3为reduce的返回值

③ 当所有todo被选中时，最下方的复选框也应被勾选。

给该复选框绑定checked属性，通过计算属性isAll（布尔型）决定checked值。当 全部todo数和已完成todo个数相等 且 总数>0 为真，被勾选。

④ 当勾选或取消最下方复选框时，上述每个todo的复选框都被勾选或都不选。

将最下方复选框勾选状态即checked值传给App组件，在App组件中编写 使每个todo的done值与其checked值相等 的函数。上述需Footer组件向App组件传数据，实现过程与Item部分中相同（子 => 父）。

⑤ 清除已完成任务按钮的实现。

删除已完成todo项，需在App组件中编写相应函数。与子=>父过程相似。

Footer.vue

注： 使用v-model时，绑定的值不能是props传过来的值，因为props不可修改