00:00
好嘞,各位说完了这个句名插槽之后呢,给大家讲最后一种插槽叫做作用欲插槽,来回到课件里,它在下方呢?啊在这儿作用欲同学提到这三个字,你能想起什么呢?应该会想到GS里的那个作用欲对不对啊,你还真别说这个作用于插槽和GS里的那个作用欲啊,真有几分相似啊。先不用看下边的这个效果同学,作用域插槽不太好理解,所以说接下来呢,我的速度慢一点,你跟紧我的节奏啊,回到代码里面,同学精简一下代码啊,打开APP,我不写这么多的分类了,我想用最简单的代码把这个作用于插槽呢给他说明白,美食这个分类不要了啊,电影这个分类呢,也不要了啊,然后下边这些数据呢,同学我就都删掉了,Foods还有films都不要了,样式我留着啊,已经折叠起来了,然后往上看,这里边同学我也不写多个插槽了啊,什么center,什么foot不要,同学foot整个都删掉,只留下。
01:00
一个,那既然只有一个,我也不用命名了,用默认的就可以对吧?各位,哎,你看这块改的干干净净的,那回到category里面,是不是也得进行一番修改啊啊,那这些样式给它折叠起来,同学没有必要写两个插槽了,写一个就行,并且不用指定名字了,对不?诶,这就是一个默认插槽,好,那现在呢,咱们来看一下效果啊,回到页面里面,同学就一个呗,游戏分类啊,那接下来呢,我想形成三个游戏分类,那怎么办呀?回到APP里面,各位把这段代码复制三份是不是就可以了啊走走,这是三个啊,都是游戏分类保存,回头看一下效果,诶,三个都是游戏分类啊,那接下来呢,同学你听我说事情有所变化啊来,就是目前来说,我问你啊,这一堆游戏数据我保存在哪儿?是不是保存在APP里,那就得把一些事情啊说明白,同学这有一个category这有一个,这有一个,那我想问大家的是啊,你说APP组件里面,你是不是用到了category这个组件,所以说同学APP组件就是category这个组件的使用者,你说对吗?
02:13
我再说一遍,APP组件是category这个组件的使用者啊,那数据是放在哪儿的呀?数据在这儿呢?数据也是在APP里的,也就是说目前的这个场景是这个category组件的使用者,使用这个组件的同时,数据也在自己这儿,对不?哎,接下来看着事情有所变化,就是这些数据呀,我不放在APP里了,那放在哪呢?放在category放在这个里面来把data呢粘过来,那既然放在这儿了,各位你觉不觉得插槽其实就没有必要使用了,你不就是想生成一个无序的这么一个u Li Li的列表吗?那你把它剪切走就可以了呀,然后放在这儿,插槽呢,删了且吧,不用这东西了,是不直接写在这儿可不可以?各位最标准了,数据是不是在这拿到数据,我是不是生成一个u Li Li得了吗?那回到这儿,各位你觉不觉得?
03:13
那就这两次使用里边这东西删了,这儿呢,删了,然后呢,给他毁成一行走。走这儿呢,再来同学category这个组件我用了几次三次啊,那回来看效果跟刚才刷新一波是不是一模一样,各位诶,那你看不用插槽吗?你看看啊,Cat头的组件数据在这儿,然后根据数据所生成结构的代码是不是也在这儿啊,那别人用的时候,同学不用那么麻烦,直接拿过来,组件标签一写是不就得了,甚至我都可以直接给它改成啥是不是字结束,这不都更精简了吗?好回来,那接下来呢,我提一个需求啊,各位就是什么呢?我在这儿虽然呢用了三次这个category数据肯定是一样的啊,因为同学你想想你用了三次category,那category里边保存的这个数据,那就是这几个游戏嘛,那所以说同学不管谁用,肯定都是这四个游戏,但接下来呢,我提出这么一个要求,就是第一次使用这个游戏分类的时候啊,根据这四个游戏生成的是一个无序的列表,哎,Ul。
04:20
Li的,然后我第二次使用呢,各位,我不生成这个无序的列表了,还是这些数据,但是结构有所变化,我想让它变成一个有序列表,也就是前边不是黑色的点是1234啊,然后再说这我第三次使用的时候啊,还是这四个游戏,但是我想让这四个游戏啊,不是什么列表,每一个游戏都是一个H4标题,诶,那这怎么办呀?哎,琢磨琢磨数据都是这四个游戏,但是根据数据所生成的结构同学是由使用者而定的。啥意思呢?来回来,各位打开category,我问你啊,数据是不是在这儿呢?数据我没说要变,就这数据挺好的,但是根据数据所生成的结构,你不要写在这儿,如果你把这个ul写在这个category这个里面,同学,那就意味着不管谁用这个category,你觉不觉得他都是刚才这一堆ul结构啊,是吧?啊,我得让这个使用者在第一次使用的时候告诉他是一个无序列表,第二次使用的时候得通过某种办法告诉他是一个有序列表,那第三种呢,就不说了,是这个H4,对不,你得告诉人家,那怎么告诉呢?一个最笨的办法,各位在这儿多传一个pro呗,比如说叫做type是吧,类型啊,走,那这个比如说是ul啊,那这比如说换一个叫做OL,那这比如说换一个叫做H4,然后呢,各位,那就简单了,回到这儿,你收到这个东西,就是刚才那个tab,在这写一个条件渲染是不是就可以了。
05:58
哎,如果你传递的那个typeb是ul,我就展示这个结构,哎,如果你传递的那个类型是OL,我就再给你来一个OL列表是不行各位,但你这么写啊,有弊端,弊端在哪呢?同学你想想啊,你在这里不断的写那个判断,如果你是什么,我展示什么,如果你是什么,我再展示什么。同学你得写很多判断吧,那你说万一有一天啊,人家传的不是u lolh4,人家传的是一个,哎,这东西,比如说我想让每一个游戏啊都是一个死SPA,那你觉不觉得同学你这么写就不灵活了,你得找到你这个,然后问人家,哎,说哥们儿,你这回传进来的,想让他每一个游戏都是什么呀?然后人家说是死span,他说好嘞,我在这儿呢,再给你加一个啊那个判断,如果你那是span,我再给你生成一个span,然后span里面呢,我再用这个v for同学是不是特别麻烦,不灵活吗?哎,删掉,那怎么办呢,同学你就可以借助这个作用于插槽了,来各位啊,把这段结构我给它带走,然后在这呢我正常写。
06:58
这个插槽,哎,Slow的同学,这是什么插槽啊,默认插槽准备好了吧,嗯,你如果只写到这各位,那你放心吧,你这分类里啊什么都没了,对吧,因为你没有传结构嘛,回来同学来吧,你说第一次使用这个游戏的时候,来这些呢,我先给它删掉啊,我想它是什么来着,无序列表是不是无序列表呢?就是u Li Lia同学我放在这儿是不是就行了,那我第二次使用它的时候,我想它是啥来着,有序列表,那我把这个传进来,诶走OL是不就行了,哎,那同学这儿呢是什么来着,H4,那我就把这个复制,把这Li啊给它改成H4,这回是不就行了呀,你看看吧,各位,我用这个游戏的时候啊,我写了category,然后呢,我传进去一个,哎,无序列表这呢,有序列表这呢,H4那在这东西往里一塞不就得了吗?哎说老师那也是呢,这不就写完了吗?那这也不是什么作用于插槽啊,这不就是咱之前学的那个什么默认插槽吗?这不也写完了吗?
07:58
哎,同学你没看效果呢,我告诉你看效果你就废了,哎,回来同学刷新一波,后者台是有报错的,你看看他报什么错误了,往上滑,他说诶games没有定义。
08:10
为啥呀?还觉得挺委屈的,回来你看你的代码来,各位我问你啊,你在这便利谁呢?你便利的时候是不是都用到了这个games呀?但是我想问的是同学,Games在哪了呀?在APP里吗?不在,也就是说哥们儿,你往下看,APP里边没有数据,你还在这变了个什么games呢?哎,说老师,是啊,那games在哪呢?Games在这儿呢?同学觉不觉得只有在这个组件里面,你才可以肆无忌惮的去使用这个games,但是在这个组件里呢,你不能去使用这个games,你敢用他就报错,同学绝不觉得这就是一个作用欲的问题。嗯,我的category这个组件,这个作用域里边,我就可以去用这个games,对吧?在这个交互的逻辑里面,我可以这么写,就得到了这个games this.games然后在模板里面我可以直接写games,是不是就得到了这一堆游戏啊,啊,但是在这里面同学无论你怎么写,你也碰不到这个games,这不就是GS里的作用域问题吗?那接下来同学就是我的APP组件,也就是说这个category组件的使用者,哎,这个组件的使用者怎么能得到原本放在category里边的这个gamess是吗?各位,也就是说现在你能够通过某种方式把categ green里的这个games传给APP,那就OK了,因为APP里边要用吗?哎,所以说同学你体会一下数据在哪,在这个category组件里面,但是根据数据所生成的结构要由谁决定啊,要由这个。
09:51
Category的使用者,也就是APP,这不使用的吗?这不使用的吗?这不使用着呢,有使用者决定决定决定啊,那怎么传来吧,不墨迹了,说说怎么能让APP得到这个games插槽给我们提供了一个便捷的方式去把这个里边的games传给这个组件的使用者,那怎么传呢?来回到这儿,看好了各位在这里边呢,其实你也可以写那个默认的内容啊,比如说我给你写一下叫做卧室默认的一些内容,对吧,可以写,然后注意了各位,就如同写pro一样,把东西给它写在这,你想传谁games,那就给它起一个名字,比如说叫做游戏啊或者游戏行吧,各位,这我都不能,就不能再low了,对吧,游戏一堆游戏嘛,游戏,然后等于谁呢?是不是这个games,但你这么写肯定是不行,它不读取这个games呀,是不得,哎绑定数据啊,哎,然后同学能不能别这么low,别叫游戏,咱能不能也叫games。
10:51
同学,要是正常来说啊,这块我写的可能是这么一个组件,比如说叫做DEMO,同学我这么写大家想必都明白,我是不是给DEMO这个组件传递了一个pro,名为games值呢?是这边的games是不是这意思,但是现在我写的不是组件标签啊,我写的是一个内置的lo标签,哎,那我写完这个东西,他把这个games传给谁了呢?来同学这就有点绕了啊,你是不是在这个lo里面写了一个games呀,那我直接告诉大家,他就是把这个games传给了这个插槽的使用者啊,插槽的使用者。
11:30
同学,我问一下这是不是一个插槽,嗯,你写插槽的目的是干嘛呀,等着别人往里边塞构,那你听我说各位谁往你这里边塞的结构,那么这个games就传给了谁啊,那谁往我这里边塞结构啊,你回到APP里边你去看呗,各位他是不是往里边塞了一下结构,这是不是也塞了一下这儿呢?是不是也塞了一下啊?好,我先把这些给它注掉,咱先把一个给它玩明白了,这也注掉来吧,各位,我跟你讲,就这块儿就可以收到你所传入的这个games,有一种感觉啊,各位插槽的作用其实就是插槽的使用者往插槽里边塞东西,但是作用于插槽,也就是说你在这写了这么一个东西,有一种感觉,你让这个数据流啊逆着过去了,也就是说让定义插槽的那个组件把数据反着传给了插槽的使用者,哎,那怎么能收到这个games呢?哎,同学要求就是你得把你。
12:30
凡入的这一堆结构的外侧必须得包裹一个template啊,你不包裹你就甭想拿到之前吧,咱得这么说,这个template吧,咱想用就用啊,不想用的咱就不用,如果你用了就是不破坏结构,最终那一层脱掉了,但是在这儿同学没得商量,你必须要用,然后把这结构给它放进来,说老师,那然后怎么收呢?瞧着在这写一个特殊的属性,叫做cope,注意没有D。我写样式的时候,各位确实写了scope的,叫做局部的样式,但是在这儿同学不能加这个D就叫scope,因为人家的API设计的就叫做scope,叫做作用啊,然后在这呢,同学起一个名字,这个名字你可以随意定啊,不是说你在这儿写了一个games,我这呢就必须得写g mes,不是你可以写at特硅谷同学你就能收到数据。
13:21
啊来慢慢来,我把这Li给你注掉,这么的,我把这个u Li啊,我都给你注掉,然后在这里边各位我给你写一个差值语法,我把这艾特硅谷啊给你写在这儿啊,然后你看看效果啊,各位看看我收到的这个艾硅谷它是个什么东西啊,回到这儿刷新一波,各位什么呀,你看好了再说啊是什么呀?是一个对象,哎对象里边有一个属性名叫做games,那么值呢,就是刚才哎咱们写的那个数组对不?各位,哎,捋顺一下各位啊,怎么个情况呢?我在APP里面要使用category这个组件,我还知道这个组件里面有一个插槽,对吧?那然后我写这个东西啥意思呢?我想往插槽里边放东西,那你放的东西是什么呢?各位我得根据这个数据来,那这个数据从哪来呢?这个数据从定义插槽的这个组件来,哎,你看看是不是有点绕,数据在哪在开。
14:22
各位,这个组件里面,你把数据交给了谁?交给了这个插槽的使用者啊,那插槽的使用者在哪了?在这儿收没收到呀,收到了然后呢,那就出来了呗,那我想要的是不是那个点games呀?所以说各位我是不是可以这么写来一个点games,那这回你再看数组就出来了呗,哎,那我想遍利的是谁呀?不就是at的硅谷点games吗?所以说各位ul给它解放开,哎,然后怎么办,这怎么写,哎,直接这么写就得了呗,艾特硅谷点games,那这回呢,回头你看一眼刷新是不是这个效果,哎,就写到这儿吧,同学们可能有一个感觉,就是老师你说我没懂吧,我也懂了,但是我总觉得你在这就好像就是绕了两圈,说老师你看我就把这数据拿过来,然后呢,我就放在这个里面,完了,我在这就干干净净的便利,也不用什么作用于插槽,我咔一下就写个u Li Li就得了呗。同学,我知道你这么写行,但是有这么一个特殊场景啊。
15:22
啊,就是数据不在你这儿,你倒想要数据他不在你这,而且也不允许别人给你,那怎么办呢?就只能在人家这儿,那你不就得通过这个作用于插槽吗?是吧?各位来回来,那你说我既然能便利一个ul Li,那我把这块给它解放开,大家知道怎么写了,你把这个templatet给它拿过来,在这儿给它粘上,然后你说怎么办?U Li咱给它改成OL是不就得了呀,而且我还能做的更好一点,我让每一个Li啊都有点内联的样式,比如说color的颜色都让它是红色,那各位这回你瞧着刷新一波,请问各位这是不是一个组件啊,对,叫什么组件,Category,我有没有复用这个组件有我用的一次两次数据是不是一样的,是都是这四个游戏,但是根据数据所生成的结构是由使用者而定的,好好体会这件事儿,谁是使用者?嗯,这儿来是使用者,这儿是使用者,对不使用者可以去决。
16:22
我到底把一个什么样的结构给你,那数据呢,我也懒得存,就放你自己这儿吧,你把数据给我就行了呗,啊那在这儿呢,还有一个技巧,各位你看我在这儿啊,得通过一个东西收到艾特硅谷,然后在这艾硅谷点games,说老师为啥要这样做呀,得形成一个对象,完了再点games,因为各位你可能传递多个东西啊,你比如说传递一个X啊,值呢,比如说是一个hello,别X不好听,Mes是吧,各位我这么能传多个东西嘛,啊那所以说在这呢,爱的硅谷身上不仅有games,还有什么呢?MSG呗,哎,不信我们测试一下,在这个的下方啊,你再写一个,比如说写一个H4啊,然后写一个什么呢?这个差值语法写它啊走嗯来回头看啊第二个使用你看刷新一波,诶不是games啊,换一下MSG保存回头你看哈,对吧,各位哎呢,把这个呢给它删掉,那你总这么写是不是有点烦呢?各位你看at硅谷点,At硅谷点,所以说在这同学它支持结构赋值,这就看你ES6过不过关了,同学我是不是想要那个games,诶你可以这么玩,走解构赋值games,那在这就轻松了,直接games回头看效果刷新看看是吧,还能出来,诶再走,那同学接下来把这个也解开吧,我想让它生成那个不是列表,是一堆H4,哎组成的这么一个上下的结构,那就把这一堆给它复制,给它粘过来,然后OL给它删掉,然后把这H4呢给它剪切走,给它往这一放是不是就可以了啊,在这是不是也写这个games啊啊,那是不是也便利这个games啊,那回头看。
17:56
的效果呗,走看哎,数据都是一个数据,但是这个结构是由使用者而定的啊,那在这呢,同学它还有一个写法啊,就在这儿呢,你可以不写这个scope啊,你可以写一个另外一个标签啊,叫做slope,然后杠scope,其实跟那个写法是一样的,各位啊,来给这个games呢,给它拿回来啊,保存回头刷新一波,你看是一样的,你用哪个都行,同学还是那句话,就是新旧API的问题,这是一个新的API,这是之前的写法,OK,用哪个都可以啊,在这呢,是支持结构赋值的同学,希望大家吧好好体会一下这个作用与插槽啊,就是说如果你还是不懂同学把这视频呢重新咱们再听一遍,体会一下是不啊,数据是在这个插槽的定义的那个组件里的,在这儿的啊,但是用这个数据生成的结构是由这个插槽的使用者而决定的,你说ul就ul,你说OL就OL,你说H4呢,那就H4同学,这样的话是不是能更灵活一点呀,哎,好好体会体会来,各位最后呢。
18:56
我们把这个插槽相关的东西啊给它总结一波来,Readmi文档已经写好了,插槽的作用就是让父组件可以向子组件指定的位置插入HTML结构,说老师,这怎么又出现负子了呢?各位你想想,你能在一个组件的结构当中去写另外一个组件的标签,这不是父子,这是什么对吧?好,再往后读,也是一种组件件通信的方式。同学你看父亲也把一些数据给了孩子,只不过给的这数据啊,有点高级是啥呢?是HTML结构,并且我能在指定的位置给你放入这个结构,对吧?各位,哎,那插槽呢,一共有默认插槽,句名插槽以及作用预插槽啊,使用方式呢,默认插槽很简单,同学咱开玩笑的说啊,在这儿呢挖个坑,在这儿呢填点土就完事儿了。再说这个句名插槽,就是挖坑的时候怎么着各位能起名啊,然后你传东西的时候,同学可以这么写啊,Lo等于center或者是杠。
19:56
Float冒号foot特是不?哎,其实同学觉不觉得前两种插槽都非常简单啊,最后一个就是有点不好理解啊,来读一读啊,各位说数据在组件的自身,这个组件的自身指的是谁呢?指的就是你定义插槽的那个组件的自身,说白了就是我们这里的谁呢?Category你说对吧?好,再往后读,但根据数据所生成的结构需要组件的使用者来决定,哎,我给你写了一个括号games,数据在category组件当中,但使用数据所便离出来的这个结构呢,是由APP它的副组件决定的,具体编码呢,那就在这儿对吧?哎,你这儿呢,想收到一点数据,然后在这儿呢,也可以用这种方式收到一点数据,随后呢,收到你就用呗,该变利就变历,但是具体是ul还是H4由你定,那么子组件当中呢,同学插槽啊,就正常留着,呃,然后数据呢,是在这儿的,OK,这不就是所有的插槽嘛,插槽一共有三种,然后这儿呢,再跟大家多说一句,就是作用。
20:56
与插槽啊,也可以有名字,你比如说我在这儿写一个name幕,Name幕叫什么呢?比如说叫做啊哈哈吧啊同学我是不是写了name幕,哈哈,你要是直接写到这儿,那这些东西可就都要丢了,默认内容就出来了,因为你并没有说你要往哪个里面放,你在这可以正常的写slo,哎,然后在这等于比如说哈哈保存,回头你看这是不是有数据了啊那在这儿呢,同学就不刻意的绕大家了,默认插槽能掩示明白的事,为什么非得起名字呢?啊那同理各位你用那个,呃,它和咱们那个默认插槽就这么写,是不是也能配合呀?OK,好了,那这就是插槽相关的内容,来把这src呢复制一份,同学在这粘过来,名字再改一下,最后一种插槽下划线src走叫做作用欲插槽,其实同学你说作用欲这三个字是在哪体现的,我觉得是在这个位置,哎,还有这个位置体现出来的,你这里明明没有games,但是通过作用于插槽,诶,我给你把数据递过来了。
21:56
是吧,各位OK,插槽呢,咱们就聊到这儿啊,在真正开发当中用的还真挺多的,好,那这一小节呢,我们停。
我来说两句