26_尚硅谷_Vue_案例_动态初始化显示

动态组件是不是又分为两步，第一步实现数据的什么初始化显示，这里面就涉及到一些问题，我当前这个里面。需要变化的是一个什么样的数据？是不是说白了，是不是主要是列表啊，对不，也就是说我们是不是应该有一个todo。的一个什么。宿主。没问题是吧，好，现在有问题，数组里面每一个元素都是一个什么类型？那那看啊，数组里面每一个元素是不是代表它呀。首先是不是肯定有这样一个名字，除了这个还有别的吗？有还有谁的这个？勾选状态，因为离勾上是不是代表已完成。能懂不？那好了，那也就是说我们每一个元素都是对象，假设这个叫title啊，名称标题好，除了这个title还有什么？

啊，譬如说完成叫什么呢？这个什么类型。不类型吧，因为勾或者不够吗，能不能。好，那也就是说我们要设计这样一个数据啊，60。下面一个问题，还有一个问题啊，还有问题什么呢？这个数据放在哪个组件里面保存。对不？我们前面说过怎么设怎么去分析啊，看是某个组件需要还是什么，某些组件需要，我们的头部需不需要，需要，到时候我要往里面添加是吧？列表需不需要，需要负的需不需要看统计啊，对吧。甚至还有删除对不对啊，那所以很简单啊，放在什么副组件里面。

那好啦。既然分析清楚了，那我们就去写。那我们在APP的哪个位置去初始化数据呢？啊，就看在哪个配置里面去写，说白了就是那个。先把这个结构摆好。对吧，接着名字叫什么。土死吧，宿主吗？好是一个什么宿主？宿主的每一个都什么对象，对象里面有一个抬头。是吧，好，我就写一个吃饭睡觉啊是吧，啊开始为什么呢？不，那就是说默认勾选吗，是不勾啊好不勾好了这一个。嗯，睡一觉啊，下面这一个啊，就别打豆豆了，你们有机会打豆豆吗？啊，就叫扣嘛。

好，你们基本上就干这三件事吧，啊，有的同学估计还要还要打打游戏什么的，好按说来说呢，这个地方啊，这个地方应该都是破，对不对，我故意的有意的把它改为true，那也就是说在初始显示的时候。第二个应该被勾起。能不能懂啊，我就看一下我的初十有没有效果。能理解吧，好，那这一个数据，这个数据交给谁了，是我当前组件用吗。不是。现在我要实现初始化显示，谁来去显示你嘛，所以很简单嘛，是不是对啊，上来就说个冒号啊，说完冒号基本上你就肯定没问题了。就60等于什么，就60。

下面写谁去，是不是写它啊，写我们的这个图中历史是吧？在这里面首先是不是要声明接收属性呢？叫什么pro，好，我们一共有三种难度啊，简单，中等难度和复杂，我们就写中等的就行。啊，写中等的指定属性名和属性的类型，属性名叫什么to什么类型数组吗？能看到吧，其实跟我们昨天没有两样，说实话好，那下面我是不是里面有一个U有很多显示，那ii我是不是抽取成组件的呀，所以把这一个给他捞到。Item里面来是吧，拉到这里面来好样式是不是同样也要捞过来？怎么样是吗？

来，拿过来能看到吧，好，那下面来我们写啊，其实这个昨天咱也写的差不多的，我们是不是要使用这个todo item啊，还是那句话，这东西port todo item from，点斜杠todo。爱是吧，接着我要写一个配置啊，绿色成标签是吧。嗯，这个是中文的，嗯。好。来这个地方就写什么to do it。能看到吧，好，那下面我这个地方是不是就写这个就够对吧，只是这个标签是不是生成多个。怎么是吧，写好结构啊，这东西都是固定的in水TO60，那我这个里面写什么出入逗号，这里面冒号K等于。

是吧，那现在我们要将to是传给这个，怎么搞冒号？To等于什么todo？其实如果你昨天还印象的话，不只要传todo啊，已经很有经验了，Inex等于什么in？那我是不是向子组件传递了这么两个属性了，好，那我这边啊就简单了，先声明是吧，是。有todo什么类型？包对象呗，Index什么类型number可以吧？好来下面我这边是不是去显示，首先这一个一旦看到input，马上想到一个东西叫V-model。

是吧，摸去读谁去todo里面是不是有一个属性叫什么，是个不吧。也就相当于我这个输入框，我的这个checkbox是不是跟这个属性关联起来了，但而且双向的啊，双向的首先我可以读，再一个我改变了它也会变，能理解吧，好没问题，这个这个更简单了。求啊点。是吧，好来。那也就是说到此为止，我们的初始化显示就完了，我们来看一下，看看一下情况。有没有有啊，都勾选了吗。

能不能看到啊，没有太大问题啊，如果说啊，你的界面显示有问题啊，如果界面显示问题，你首先第一步干嘛。如果说界面显示有问题了，首先看有没有报错。对吧，打开它得看一下有没有报错，好像说老师报错了，那肯定就找就看问题嘛，哎，没报错。没报错，就是看什么，看数据大家知道啊，组件化开发，它都是根据数据来显示界面的。对不对，那此时我们就可以去打开我们的工具。去看我们的数据，懂吗？OK，这个地方既能看到data啊，还能看到pro。能看到吧，一定要记住啊，一个看有没有报错，再一个就是看数据，因为界面的显示都是根据数据来显示的，如果你的显示有问题，无非就是报错了，或者数据不对。

那么呢，这个不对啊，可能不是数据本身有问题，而是你读的有问题。对了，不懂，比如说比如说我这个地方，我这个地方一不小心写成T2。对不对，能读到数据吗？不能啊，OK。看到了吧，现在不是有问题吗？那有问题，这个title没显示出来，那我首先得去看一下我的这个数据啊，我接收到的这个数据，说白了我可以看一下它，对吧，是不是传过来一个todo里面有，看来和什么title有数据吧，有但没显示，是不是也没有报错，那我得看我这个读到底读的对不对。是吧，这样就能发现问题，但一定要知道怎么去调试，这个其实最关键的。任何人都不能保证不出错。

我课堂上之所以出错少，是因为前面有练过，你不要想着怎么着就练的多了，他肯定出错少，你也一样。好。这是这个啊，那也就是说现在我们实现了一个是不是动态的初始化显示啊，嗯，没什么太大问题啊。