23_尚硅谷_Vue_案例_交互添加

下面我们要做添加和什么删除做交互啊，首先要确定你做交互首先要去操作哪个组件啊，譬如说我们的这个这个。哪个找到我们要操作组件ad吧，从哪块做起呢？做交互。从绑定事件监听开始做起。你要确定你给谁保定监听指定回调函数，在回调函数里面该做什么。尤其是大家先选的时候，一定要有套路，这个套路而且尽量固定下来。啊，你写多了你就自然就是没套路，也是套路，就是你写多了以后，你随便写，你倒着写都行啊，没关系，那谁也拦不住你，因为你会嘛。OK，好。下面我们说过了啊，写交付首先集上来就是要绑定事应津贴，给水保。啊，是个but什么吧，对啊，这就是一个套路，基本的一个套路是吧，可我就等于一个艾可以吧，可以那现在那也就是说我现在要去。

写一个什么，再去写一个什么爱的是吧，在这里面最终我要将我输入数据是不是收集起来。添加到那个comments里面去，是不是好，这个地方就有个概念叫收集数据。而且我们前面说个概念叫自动收集数据，还记得吧，那也就是说一个什么事呢？我们一旦看到音input的，马上要想到一个指令。VGA model自动收集数据。啊，这是不是name可以吧？好，这个是不是我输入内容啊，VGA model，内容content一旦写上了，微model马上去定义，对应的date永远是固定的，一点变化都没有。

写一个不看这为什么写，写多了吧就人变傻，就是因为这东西都是这个套路，他特别简洁，就是按照一步一步做就行。好，来空创呗，这个content。对吧，好来，我在这里我们来说一下我们要做的事情呢，有一个基本流程，这个流程里面不涉及到任何语法啊。第一个我们要收集啊。根据输入的数据啊，最终。封装，封装成一个什么对象？对吧，啊，其实如果做的好一点，最好是先干嘛呢，先检查检查输入的什么合法性，对吧，那只有检查通过了是不是才做第二步，你要检查没通过是不是提示一下啊，这个示那句话我就不说了啊。

好，第三步。你成component最添哪去添加到是不是components中。对吧，先谁添加comp先这它呗，是吧，啊我就简单的写一下好了，我们整体就是这么三步来，下面一步步做检查合法性，我先把他们都取出来啊，这个怎么取呢点那。OK，最好还可以干嘛呢？催一下可以不啊，OK，好，还有什么看等于this.content点是什么情况，下面啊，我就不继续了呢，对不对。

就不合法吧，我简单弄一下啊，就是他是不或者他是，那肯定是其中有一个不合法吧，那只要有一个不合法，那我肯定是要return，那看你啊要不要提示一下对吧，你们提一下啊OK，嗯，就是什么，嗯，姓名。或什么内容啊，不能为空对吧，简单提示一下啊，我也这个检查其实也不是特别的特别的详细简单检查一下。这点很重要。不能继续了，对吧，好到了下面说明什么。说明合法了，合法了，我最终就要去产生一个对象，叫什么画分。

对吧，那很很easy的，是啊，Name和什么好这个地方要注意，这个名字不能随便瞎写。因为我们数组里面的那个对象里面属性名是固定的name和C的，这就说取名一定要一致，包括这里面取名也尽量用这两个名字。不要用别的名字。因为一旦用上了两不同的名字，就容易搞错，容易搞混。啊，尤其是大家开始做的时候啊。好，下面一步。添加的comments这一问题，Comments现在我有吗？没有对吧，没有comments在哪个组件里面APP啊，以前应该说过一句话啊，那句话其实挺关键的。叫数据在哪个组件啊，OK，数据在哪个组件啊，其实都一样啊，操作数据的行为啊，或者叫更新数据的行为。

的行为，这个行为实际上指的是什么呢？方法或者叫函数，那懂吧，就啊应该定义在哪个组件，这是叫一个。他写代码的一个约束。一个依照，那现在也就是说我们现在往里面是不是要加一个component。那这一个方法，这个函数就不应该定义在别的组件是吧，应该定义在当前组件吧，那也就是说我们这个地方需要去定义一个东西，MY能看到吧？好，那也就是说我们有一个方法叫添加评论吧。对吧，写名字的。可以吧，要不绝对参数。你想把I的接着什么明确是吧，那也就是说我们现在是往这个数组里面是不是塞一个。

那应该来说是比较简单找到这个数组啊。啊，This点它，那要看你是塞在最前面呢，还是塞在最后面，最前面，那最前面用什么on shift shift谁了。我跟你说，你还回想一下，我们前面写的时候怎么搞的。先把这个速度找出来是吧，塞进去以后再去调用一个特别让人受不了的方法，叫什么set state。这里面你就你就直接干就行。拿的速度塞进去呗，你显示不就得了吗？对不对，这个是比较直接的，这个直接的影响就是你写代码的时候简单。啊，不用像以前那么费劲。好，但这一个方法我自己当前组件调用吗？那所以我需要将这个方法是不是传递给我的这个子组件。

怎么传呢？冒号他等于他不要写不同的名字，就写一样的名字。而且在这上面你也看不到this。不用写认识。啊。好，那下面的问题就是我的这一个组件是不是接收这个属性。对啊，看答案反应还挺快，来下面我要去写一个比较完整的，最最完整的一种写法啊，看着啊这里面呢，首先啊，声明一个type啊，类型是什么类型呢？A大写的方形啊类型是吧？好，还有一个啊叫啊叫require，还是一直require，我记得没错，应该叫require，等会看一下啊。这个应该写什么呢？

能看到吗？应该能看到啊好，那现在我要说问题，我这个记不住了，我感觉我有有可能写错，我该怎么办。干嘛？我在看文档啊。对吧，好看文档来，我们打开文档看一下。哎，来啊，这个地方我们看一下这个API图片。哎，转半天还在转呢。他都慢的话，那网速是够可以的，一般它相对来说访问还是挺快的。好来了啊，我们需要去，我们现在是不是配置的是pro啊，我得看一下这个pro配置来找一下啊这个配置选项。

Pro对吧，放到这里来好看一下这个pro，诶，怎么跑到别的地方去了啊，再找一下啊，找你这里面看用力不就得了吗？太跑为什么这不是太跑吗？诶。是不是就叫require，我写的是require吧，是啊。还可以指定默认值的。看到了吗？这跟我们以前是不是要实现的效果里面是不一样的。只是你去对比一下语法，你就应该知道这种写法是比较容易懂的，写起来舒服一些，那也说现在我要求指定的是哪些东西，指定了属性名。指定了属性值的什么类型和还有一个就是什么必要性。

啊，OK，这个能懂吗？啊，必要性就是必须的吗？是不是指定三个方面，这是比较完整的写法了。好，那有了这个函数，来下面我这个第三步。干嘛呀？调用啊，怎么调用。我这不是一个属性吗？我们刚才说过了，这个里面声明的都在里面，可以访问瑞点他吗。括号。写什么comment，其实还有一个小步可以做，就做的完善的话，第四步啊，清除输入。对吧，清除输入怎么输怎么清除了，大家知道啊，界面的显示是不是根据这个里面的数据显示的，我只需要把那个数据怎么办？This时间内等于横串间content等于串。

这不挺好？OK，就这么个事啊，它是比较直接的啊。好，那也就是说现在我们整个都写好了，写好了以后看呗，对不对，好来。先点。哎，这个里面有时候还不行，我们刷一下看看啊，看看报错没，还有是吧，这好像不对，是静态页面吧，我看到还react，我好像刚才没有写react。找到我们刚才那个界面了，我们刚才不有删掉了吗？第一个是吧，来看一下啊点一下。是不是有提示啊啊，我输入一个AA，再点一下还是不行吗？啊，输入一个ABC好走你。就不可以就这么简单啊，是不是把我们的添加给他做完了。