24-案例-记事本-组件版

核心步骤:

        1. 拆分基础组件
                新建组件 -> 拆分存放结构 -> 导入注册使用
        2.  渲染待办任务
                提供数据(公共父组件) -> 父传子传递 list ->  v-for 渲染
        3. 添加任务
                收集数据 v-model -> 监听事件 -> 子传父传递任务 -> 父组件 unshift
        4. 删除任务
                监听删除携带 id -> 子传父传递 id -> 父组件 filter删除

        5. 底部合计 和 清空功能
                底部合计: 父传子传递 list ->  合计展示
                清空功能: 监听点击 -> 子传父通知父组件 -> 父组件清空

        6. 持久化存储: watch监视数据变化，持久化到本地

代码示例:

1. XxHeader.vue : 子传父,将输入框内容传递给父组件,父组件进行添加

2. XxMain.vue: 父传子,渲染数据; 点击删除:子传父id,父组件进行过滤

3. XxFooter.vue: 父传子,统计长度; 点击清空,子传父,父组件清空数据

4. App.vue