1.首先我们分析怎么把一个页面拆成多个组件，如下图，我们可以拆成MyHeader、MyList、MyItem、MyFooter，其中MyList包含MyItem

2.观看如下代码（我们把MyItem作为MyList的子组件，在父组件中使用v-for指令来循环展示子组件，我们选择把数据放在MyList中，我们在子组件中使用props来接收父组件传过来的数据）

注意！！！

注意此处我们使用v-for循环遍历todos里的每一个对象，我们将每个对象传给子组件的时候，指令名的前面需要加：，如上图中的:todo="todoObj"，如果我们写成todo="todoObj"的话，我们将会得到一下结果，因为此时，vue不会将todoObj视为对象，而我们加上：时，todoObj将会变成一个表达式

 

3.相对于MyList的子组件MyItem，通过props接收而来的数据决定MyItem中的展示

4.接下来我们来做MyHeader部分（我们需要在MyHeader部分的input框中输入数据，并且把它封装成一个对象，但是为了区分id，我们可以使用UUID，但是UUID包的内存较大，我们可以使用UUID的变种nanoid）

接下来，我们就会遇到一个难题，我们在MyHeader中产生的数据，如何传给对象数组数据所在的MyList呢？由于我们还没有学到全局事件总线等方法，我们这里可以采用将数据上调的方式来解决

我们采取将数据上调到父组件APP中，再让子组件通过props来接收，注意此处我们将addTodo作为一个函数传给子组件，让子组件用props接收，然后再让子组件在合适的情况下调用，实现了子组件向父组件传递数据的功能

 

5.接下来我们开始做勾选框模块

写法一：

接下来涉及到一个问题，我们怎么把MyItem（孙组件）中勾选发生的变化传到APP（爷组件）中发生对象数组中的done值的变化呢？

我们这里可以采用爷传子，子传孙的方法，我们可以给APP（爷组件）绑定一个函数，将函数逐层传递到MyList（子组件），再传到MyItem（孙组件），例如下方

孙组件用props接收后，通过this.的方式，把id逐层传给APP组件，引起对象数组done值的变化

 

 

写法二（我们可以使用v-model来实现监视，但是不建议这么做，因为props为只读属性，当props里的浅层次属性发生变化时会报错，例如图中的a；当v-model读取props中的深层次属性时，不会报错，但不建议这么做）：

 6.接下来我们来做删除模块，由于数据在APP中，我们在MyItem组件中给删除按钮添加点击事件，我们获取APP传来的todo对象数组中的id，我们将id传给爷组件APP，这时又是老生常谈的问题，孙组件向爷组件传递数据，我们可以让APP组件下方一个函数，依次传递给MyList和MyItem，通过props接收，再在子组件标签上带上该函数

 

 7.接下来我们来做统计模块，首先先将APP组件中的对象数组数据传给MyFooter组件，MyFooter组件利用props来接收，让MyFooter组件来计算统计模块，这里计算已完成的个数，用到了数组中的reduce方法

注意，此处的checkAllTodo方法是由APP组件传过来的

注意图中的isAll计算属性是是由total和doneTotal计算而来的，其中total是返回APP中对象数组的总长度，而 checkAllTodo是计算对象数组中被勾选的个数，isAll只需要判断total的值和checkAllTodo的值是否相等即可

方式一：

方式二：（第二种方式使用的是v-model，其中get()方法判断单选框是否与对象数组的长度相一致，如果一致就勾上；set()方法使其勾选时，通知APP组件遍历对象，勾上所有对象的done值，其中这里计算属性就无法使用简写形式，因为其利用到了赋值操作）

最后我们来完成清除已完成任务，同样在APP中声明此方法，再传递给MyFooter组件，组件用props接收

 

我们可以通过js中的本地存储将数据存储起来

 

总结：