008-尚硅谷-组件通信-作用域插槽

好了，各位小伙伴们，那接下来啊，咱们呢，要复习一下子插槽，那老师啊，也做一下笔记插槽。那首先说啊，在咱们的VE基础的时候，咱们已经学习过插槽了。那么插槽它可以干什么？是不是可以实现父子组件通信？但要注意通信的是什么？哎，通信的是结构。而且呢，咱们应该知道插槽呢是有三种，第一种叫做默认插槽。第二种呢，叫做聚名插槽。第三种啊是谁啊，就是作用域插槽。当然咱们呢，今天复习呢，是以作用于插槽为主。但是呢，一定要记住作用于插槽的这句话，这句话一定要记住。什么呢？就是子组件的数据啊，哎，数据它是来源于父组件。

但是一定要注意。子组件是决定不了不了自身的结构与外观，外观就是什么呀，外观就是样式。对吧。那咱们呢，去看一下咱们准备好的这个案例。那首先说啊，咱们先找到这个结构去看一眼，这个结构就是这个scope slot啊test看一下这个组件。那首先说啊，在这个结构当中啊，有两个文字，第一个是效果一。显示凸度列表时，已完成的凸度为绿色。第二个。显示todo列表带序号对吧？凸do的颜色为蓝绿搭配，这是咱们的一个结构，这不就是一个HR吗？这儿也是一个HR对吧？当然看一下咱们的结构当中，在当前的这个负组件当中引入了一个子组件。

对，不引入，而且还进入注册，而且还要注意当前的副组件当中是有一个详实数据叫todo，对吧，因为在咱们的voe基础的时候，咱们写过一个案例叫todo list。凸度右侧的V是一个数组，数组里面有四个对象。对吧，啊，那咱们呢，先看第一个。那首先说你得知道有一件事，什么事插槽是用于什么，用于父子组件通信。而且要注意子组件的数据是来源于父组件的。那咱们呢，可以使用一下这个子组件，叫做list。那咱们呢，把这个子组件咱给他搞一下。那这块要注意，这是一个子组件，哎，子组件那一定要注意它的数据是来源于来源于谁呀，父组件。

那当然副组件有没有数据给他可以，是不是就得个todo，那咱就传呗走，哎，冒号todos等于什么？等于todo。那也就是说父组件通过prop给咱们的list的子组件传了一个数据，叫todo，是一个数据，那么子组件这里可以进行接收。对吧，通过proper接受，当然这块不应该叫date，叫todo。对不，那当然这里面你也看到了他在用UL利利，而且进行便利，但你要注意，便利的可不是date，是谁，是todo。对吧，那咱们呢，可以看一下子结构。那也就是说负组件给我的这个数组，我通过力经微克for b，力是不是全变利出来了？但是一定要注意作用与插槽，一定要注意子组件是决定不了自己的啥结构的。

所以说这里面咱们需要使用到谁，使用到作用于插槽。哎，叫做什么叫做lo。对不？哎，Slot这个单词可别忘了叫做slot，哎，Slot。那当然咱们作用于插槽，对于子组件而言，是需要把数据进行回传的。比如说咱们给副组件回传的数叫todo，它是什么呢？是每一个it。那这里要注意item是什么，Item是这个数组当中，哎，每一个对象。对不？你想想，父亲给的是一个数组。那它接收的是不是一个数组，那你V-for item是啥？是不是数组当中的每一个元素是不是一个对象？那但是这里一定要注意注意这个语法这块一定要切记，这就是坐浴插槽的语法，千万别误以为，诶，这是啥，这是proper，这可不是，这就是作用插槽的语法规则。

对不，因为有的同学可能一看到诶冒号啊，这是啥，这是prop，这可不是。对吧，这就是作用插槽的语法规则。那这一行代码的作用是什么？是可以让子组件。把他的数据回传给副组件。那父组件是决定了什么？第二句话，也就是说子组件。哎，决定不了它的结构，哎与什么与外观。那也就是说，子组件的结构需要谁传，需要父组件传？对不，所以说咱们需要用到time。对不，那这块需要写成lo-Co，那这里面咱们需要用变量去接收作用插槽回传的每一条数据对象。咱们可以给他打印出来看一下，叫做todo。对不，那咱们可以看一下子刷新。

啊，要保存一下，这个明显没有保存，保存一下，那咱们呢，可以把回传的这条数据，咱们打印一下，看一下，它应该是一个对象。而且对象当中它是以凸度为KV，是父亲给的那个数组里面的每一个元素。对不？那这里要注意一件事，什么事就是子组件决定不了结构，举个例子，那比如说我想用什么，我想用SPA展示啊，每个todo的事件。那你就写SPA，那这块内容写什么，是不是应该写的，是不是叫todo那个对象点TODo.test。刚刚咱那个对象也打印了，那你看走你是不是就来了。对不？而且还要注意一件事，什么事就是已经完成的凸do为绿色。那也就是说你船的这个结构还要有颜色区分，所以说咱们可以写一个行内样式。

对，不叫color Co color。那这块取决于什么，取决于你这个凸度。它有没有完成，叫做ISA complete plate CT，如果没针，那针就做完，那就是绿色green。对吧，如果没做完，那就来个红色。所以说咱们可以看一下Z是不是颜色就区分开了。对不，那所以说作用于插槽，它是属于三插槽当中，这个三种当中，哎，最挺难理解的一个，但是要记住老师这句话，其实就不难了。比如说子组件的数据是谁给的？哎，是父亲给的，你看这明显是父亲给的数据子组件接收，但是子组件要把数据进行回传，而且要注意这里可不是prop。对，不是把数据每一条数据回传给副组件。

那父组件在干什么？在给子组件传啥传结构？对不？这就相当于什么？相当于儿子在这留了一个坑。那你父亲需要往那个坑里面填东西，填的就是这个结构，那数据一回传，那你是不是就可以展示数据，以及像咱们这个案例，比如说有颜色，你是不是可以区分开。对不啊，这是它。那一集底下还有一个效果，什么效果呢？说效果二显示凸度列表，那这个咱们可以办到。而且要带什么带序号，凸度的颜色为蓝绿搭配，比如说他要干什么带序号。这个很简单。那咱们呢，把这个list呢，给它拷贝一份，那这个咱叫list几呢叫LIST1。那当然回到副组件这里，你还是需要引入一下引。对，不应该是LIST1。那以及这里呢，你也需要注册一下子叫做LIST1。

对吧，那这块呢，那咱们也需要写一个子组件list list1。LIST1啊LIST1，当然父组件也是需要给子组件传数据，传的谁是不是to do。资所有的事情为to。那么子组件是不是就可以接收到数据以及展示数据？啊，当然这里边儿咱们是不是等着父亲往这个坑里边填呢？但你要注意一件事，什么事他要求带序列号。那也就是说，你这个坐浴插槽在回传数据的时候，不仅仅把每一条数据要回传，那以及每一条数据的索引值你也要回传。虽然咱们回传，你再给他来一个呗，比如叫做Dollar in in in DX等于什么？等于index。那这回咱们回首回到父子件这儿，咱们再打印一下子这个，呃呃，Time play当中的这个叫todo。

对不？Todo，咱们打印一下，你看这回回传的数据是什么。打印一下叫todo，记住自己眼睛见到才是真的。你看回传的数据是不是有两个字段。这是一个对象，每个对象身上是不是有两个字段，一个叫todo，一个叫Dollar inex。这两个字段是从何而来？这不，就这。对不？你回传的todo是什么？是数组当中的每一个元素index，什么是每一个元素的索引值？对不，那你就可以接收到了，那也就是说他回传的数据是一个对象，那你对象完全是可以解构的。但是结构的时候一定要注意，KV务必一致。如果KV不一致，结构不出数据。那这回你再看图图，图图是什么？是不是就是一个对象输入里边的元素。对不，那剩下的活无非就是展示呗。

那这里啊，咱们还是用到SPA，比如说展示的有什么有索引值，那索引值不就是Dollar in。Test。以及每一个事件。那不就是突度。第二，Test。那这回咱们可以看一下呢，是不是带索引值，而且带什么，带todo的每一个事项。而且要蓝绿搭配，那咱们呢，可以随便来一些颜色。找你style那区分颜色，那咱就来一个color，那就说如果你的todo已经完成了。对不，那咱给他来一个，比如说来一个黄色，否则给他来一个哎紫色。那这样颜色是不是也可以区分开？对不，这个黄色有点不好看，咱给他来个什么，来个红色。所以说啊，一定要注意插槽它主要干什么？是实现父子组件通信的。

通信的是什么？是结构？对不，而且要注意子组件决定不了它的这个结构是谁说的，是父组件决定的，而且外观子组件这个显示的这个内容的外观也是决定不了的，也是由副组件决定。那为什么在这需要讲在在复习一下作用与插槽，因为饿了么UI当中经常会用，会用到谁作用于插槽。就比如说像table。所以说这里一定要当做一个重点去看一下。所以说回首咱们再看一下作用与插槽，那是说白了无非就这几件事儿，哪几件事，第一个。子组件的数据是谁给的？是父亲给的对吧，比如说父组件发阿贾克斯拉到服务器的数据，数据拿到说给子组件传过去。那子组件拿到数据之后，诶，他是不是留了一个坑。对吧，你可以把这个当做一个坑，将来他的老子，他的父亲给他填。

这里一定要记住，别把这当做prop，这就是作为插槽语法规则。就是作用与插槽会把每一条术语进行回传。回传之后，那你这里是不是就可以展示结构内容以及外观？所以这句话一定要记住，就是哪句话，就是这句话。对吧，作为插槽一定要记住，比如说呃，子组件的数据，子组件的数据是来源于谁，来源于。副组件。但是子组件决定不了它的什么呀，外观。外观与什么呀，与结构。这里一定要注意。