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中的本地存储将数据存储起来
我们想要给TodoList案例新加一个编辑功能，应该如何实现呢？我们通过全局事件总线来进行通信
文章来源：https://www.toymoban.com/news/detail-463159.html
总结：
文章来源地址https://www.toymoban.com/news/detail-463159.html
到了这里，关于vue小案例TodoList的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
