![Vue笔记[三]-ToDoList](https://cdn.chuckle.top/images/55-1.webp)
轻笑Chuckle
·
Vue笔记[三]-ToDoList
💡
原文中文，约19600字，阅读约需47分钟。
📝
内容提要
本文介绍了使用组件化编码流程实现ToDoList应用，包括组件划分、父子组件通信、全局事件通信、编辑功能和本地存储。
🎯
关键要点
- 介绍了使用组件化编码流程实现ToDoList应用。
- 组件划分为三大块：头部、内容和尾部。
- 实现静态组件，设计页面和样式。
- 展示动态数据，设计数据结构并在组件中应用。
- 实现父子组件通信，通过props传递数据。
- 使用全局事件通信实现兄弟组件之间的数据传递。
- 添加功能包括获取输入框内容并更新todos数组。
- 实现勾选功能，修改todo的完成状态。
- 实现删除功能，通过事件传递删除todo。
- 底部功能包括全选、已完成统计和清除已完成按钮。
- 使用localStorage保存todos，实现数据持久化。
- 实现全局事件总线，简化组件间通信。
- 使用消息发布与订阅实现组件间通信。
- 添加编辑功能，允许用户修改todo内容并保存。
➡️
