Vue(十一) 组件化编码流程二

接Vue(十)

TodoLists

删除

总体思路与勾选差不多一致，在App中处理数据删除，将方法传递给MyList, 再由MyList传递给MyItem。 MyItem通过配置项的函数将删除id传递给App。如下图所示
MyItem.vue

MyList.vue。 传递给子组件MyItem.vue

App.vue

底部统计

因为要在MyFooter组件中操作数据，因此App将数据todos传递给MyFooter

MyFooter通过computed 计算属性来获得其统计数据

Array.prototype.reduce()方法

底部统计–清除已完成任务

MyFooter 思路一样，调用父组件传递过来的函数，在父组件处理数据

App.vue

底部统计–全选和取消全选

使用v-model去绑定checkbox，它的值要么true,要么是false

结果有个错误，点击全选按钮的时候，这边会说没有setter方法，那是因为点击他就相当于要修改这个值，而在computed配置项中用了简写的形式，所以只有读取，没有setter， 所以要改成 非简写 形式

如下所示
MyFooter.vue

App.vue

这里的一个重要的思考：input作为一个输入类型的结点，如果输入的初始值要展示，以后还要有交互。 可以用v-model 指令来实现，就如上述例子的全选or全不选

案例初级版总结

1. 组件化编码流程：

   ​ (1).拆分静态组件：组件要按照功能点拆分，命名不要与html元素冲突。

   ​ (2).实现动态组件：考虑好数据的存放位置，数据是一个组件在用，还是一些组件在用：

   ​ 1).一个组件在用：放在组件自身即可。

   ​ 2). 一些组件在用：放在他们共同的父组件上（状态提升)

   ​ (3).实现交互：从绑定事件开始。

2. props适用于：

   ​ (1).父组件 ==> 子组件 通信

   ​ (2).子组件 ==> 父组件 通信（要求父先给子一个函数）

3. 使用v-model时要切记：v-model绑定的值不能是props传过来的值，因为props是不可以修改的！

4. props传过来的若是对象类型的值，修改对象中的属性时Vue不会报错，但不推荐这样做。