TodoList案例

提示：本文基于对vue的学习，做一个案例，本文只是第一版，后续将对该功能不断进行优化

文章目录 前言一、静态组件二、初始化列表三、添加一个todo3.1 父传子3.2 子传父3.3 优化处理3.4 完善3.5 组件间通信 四、勾选4.1 实现4.2 修改写法 五、删除六、底部统计七、底部交互7.1 全选7.2 清除已完成 八、总结

---

前言

提示：这里可以添加本文要记录的大概内容：

在之前的学习中我们已经学习了Vue里的基本使用，本篇文章将对基于Vue的使用做一个案例

---

提示：以下是本篇文章正文内容

一、静态组件

app.vue

二、初始化列表

展示动态数据

三、添加一个todo

以目前的知识来看，list和header不能通信，即header组件里的topoobj不能传递给list

那么如何处理？
借助父亲来解决

处理方式：

3.1 父传子

3.2 子传父

3.3 优化处理

3.4 完善

3.5 组件间通信

四、勾选 4.1 实现

app:

myList:

MyItem:

4.2 修改写法

五、删除

六、底部统计

七、底部交互 7.1 全选

app.vue:


myfooter.vue:

优化：
myfooter.vue:

7.2 清除已完成

app.vue:


myfooter.vue

八、总结