【vue】综合案例：小黑记事本组件版

拆分组件

新建组件

创建.vue文件

导入注册

导入样式

使用

渲染组件

（提供数据(公共父组件) → 父传子传递 list → v-for 渲染）

 1.提供数据->提供在公共的父组件 App.vue()

 2.通过父传子，将数据传递给子组件

3.利用v-for渲染

因为只有在父组件中提供数据，其他子组件才能都可以使用

此时在父组件中提供了数据，但是由于数据都是独立的，目前子组件无法使用到父组件的数据

此时就需要父组件将数据传递给子组件

页面中就有渲染出来的效果了

添加功能

1.收集表单数据-> v-model

2.监听事件（回车+点击）

3.子传父，将任务名称传递给父组件App.vue

4.进行添加unshift（自己的数据自己负责）

首先先收集表单数据

2.监听事件（回车+点击）

打印v-model的名字，todoName，看看是否能获取到输入的信息

3.子传父，将任务名称传递给父组件App.vue

可以拿到信息

那就进行修改

小优化

删除功能

 1.监听事件（监听删除的点击）携带id

 2.子传父，将删除的id传递给父组件App.vue

 3.在父组件中进行删除 filter （自己的数据自己负责）

监听，获取id

获取成功

验证可以获取数据后，就将该id发给父组件，让父组件进行删除

验证父组件接收到了id

接收到后，那就根据id删除信息

原

删后

底部合计

现在这个记事本没有底部合计功能，

将父组件的数据传给子组件，子组件再将其长度渲染出来就好了

此时合计功能就好了

清空功能

子传父 通知到父组件->父组件进行清空处理

点击清空前

点击清空后

持久化存储

1.watch深度监视list的变化

2.往本地存储

3.进入页面优先读取本地

总结：

核心步骤：

① 拆分基础组件

新建组件 → 拆分存放结构 → 导入注册使用

② 渲染待办任务

提供数据 (公共父组件) → 父传子 传递 list → v-for 渲染

③ 添加任务

收集数据 v-model → 监听事件 → 子传父 传递任务 → 父组件 unshift

④ 删除任务

监听删除携带 id → 子传父 传递 id → 父组件 filter 删除

⑤ 底部合计 和 清空功能

底部合计： 父传子 传递 list → 合计展示

清空功能：监听点击 → 子传父 通知父组件 → 父组件清空

⑥ 持久化存储：watch监视数据变化，持久化到本地