父子组件传值案例（小黑记事本）
1.需求说明
-
拆分基础组件
-
渲染待办任务
-
添加任务
-
删除任务
-
底部合计 和 清空功能
-
持久化存储
2.拆分基础组件
咱们可以把小黑记事本原有的结构拆成三部分内容：头部（TodoHeader）、列表(TodoMain)、底部(TodoFooter)
3、综合案例-列表渲染
思路分析：
-
提供数据：提供在公共的父组件 App.vue
-
通过父传子，将数据传递给TodoMain
-
利用v-for进行渲染
TodoMain.vue
- {{index+1}}
4、综合案例-添加功能
思路分析：
-
收集表单数据 v-model
-
监听时间 （回车+点击 都要进行添加）
-
子传父，将任务名称传递给父组件App.vue
-
父组件接受到数据后 进行添加 unshift(自己的数据自己负责)
TodoHeader.Vue
小黑记事本
App.Vue
5、综合案例-删除功能
思路分析：
-
监听时间（监听删除的点击）携带id
-
子传父，将删除的id传递给父组件App.vue
-
进行删除 filter (自己的数据自己负责)
TodoBoy.vue
- {{index+1}}
App.Vue
6、综合案例-底部功能及持久化存储
思路分析：
-
底部合计：父组件传递list到底部组件 —>展示合计
-
清空功能：监听事件 —> 子组件通知父组件 —>父组件清空
-
持久化存储：watch监听数据变化，持久化到本地
TodoFooter.vue
App.vue
7、成果
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！