00:00
大家好,我是学习园地的特约讲师高国峰,上节课咱们学习了will的父子组件之间的通信,当然了,父子组件之间的相互访问也属于通信的范畴,那这节课咱们再学习will的,呃,组件中的最后一个知识点就是插槽,那插槽呢,也是我们组件里边非常重要的一个知识点,用的比例也非常多。那比如说什么是插槽,为什么要用插槽,那咱们就得说插槽呢,是实现组件,组件的一个扩展性,你比如说我们在做项目的时候,做项目的时候。嗯,回答好啊,比如说大家打开的这个,呃,网站看一下,你比如说侧边栏,你看侧边栏有这块有一个栏目,那下边呢,我们还有一个栏目。那这两个栏目呢,我们用两个组件来解决肯定是没问题的,对吧,那如果这两个组件对吧,你看宽度高度也好,对吧,有很大的相似性,有80%的接近。有20%的不同。我们说了声明两个组件是可以解决这个问题的,但是呢,我们能不能一个组件把这个活干了呢?
01:01
不用声明两个组件呢可以,那么你就需要把不同的区域用一个插槽做占位服务做占位,然后呢,我们把数据给补充掉就可以了。就像呃,我们这个例子一样,比如说在我们在各个页面都有广告位,那广告位它是应该我们制作一个组件还是呢?咱们有不同页面不同位置放了十几个广告位,还是每个广告位一个插槽呢,对吧?当然了,如果呃8%是不相同,只有20%相同,那我建议你还是做两个组件为好,刚说了一半以上是相同的,那这样的话咱们就可以声音成一组件,用插槽来解决,那这样的例子在各个网站开发中肯定是很多很多的,对吧?那咱们就呃不去详细的说这样的一个例子了,那插槽就是可以实现组件的一个扩展性,抽取共性,保留不同。当然了,像刚才在看那个侧面栏,如果只是数据不同,那肯定是在副组件里边分配给组,组件里边两种数据,各自便利各自的数据就完了,那个还是相同的组件。所以数据不同不是说我们抽取插槽的一个方式,而是说一个组件,它不光是由数据组成的,它还有样式,由GS特效这些几部分组成的。
02:11
如果数据不同,咱说从负类分配过来,但是呢,有可能样式不相同,对吧,那这个时候我们就需要怎么办呢。我们就需要用不同的插槽来来组建。对吧,你比如说。嗯,我们举个例子,在这个里边吧,你假如说我们的这个里边的侧边栏上有三个组件,用到了三个组件,你看。在我们这块用到了这三个组件,看到了吧,这三个组件,那每个组件现在是一样的,但是呢,我除了这个组件显示的文字,你看啊这块BR,那我下边呢,再显示一个,假如说这是按钮这块来个子总件,如果这个标题。之后我们来个H3吧。假如说这块是一个标题。当然了,加H3我就能加这个,你看如果标题不同,这H3也太大了,那我们来把H小一点。
03:04
啊,这个宽度高度它也比较大了,那我把这个样式再改一下,宽度我们来个百分之。嗯,60吧。80吧,然后这块也不要主要做啊,然后高度这块是100稍稍大一点啊,然后挖金石黄色没问题啊。这个100有点大80。其实就用咱们就用三个组件,嗯,做例子啊,这样的话咱们让着竖着去摆这个侧边玩,那比如说数据如果不同对吧,那我们分配过来的通过属性也好,或者自己请求接口返回的数据不同,那我们这块假如说用我们一个差值的方式去改变这个数据,这是没问题的,你比如说这里边我们用T标题,那么。我们这块来点t.T。这里边返回ret,当然不同的组件,你请求的接口,比如通过ID请求的接口不同,对不对就可以,那我这里边直接T标题。
04:00
这块是t le111随便写了一个。嗯,Date我这里边。这里边儿我们需要以这块逗号隔开,你看。啊,这网络又断了,没关系啊,你看我们在这个地方使用这种插槽的时候,这个标题标题标签二都是用相同的,那我们请求不同的接口,那返回不同标题,那改变内容这块是没关系的,这个是不用插槽的,但是如果样式不一样,比如说我这块来。BOT to,假如这块来一个啊,提这块加一个啊提交。提交你看如果来按钮的话,你看每一个都是按钮,但是我想这个是按钮,这个是一个链接对吧,那这块呢,又是一个,呃,比如说不同颜色的按钮样式不同,但是大致上都是一样的黄色背景啊钮标题啊,对不对,只是中间内容不同,那这个时候我们怎么做呢?那我们就需要用插槽来解决,就像我们做一个函数一样,就像我们比如说声明一伽函数。
05:01
或者教他一个方法,方法一样,你比如说我们生为一个ad的一个方法对不对,那我们如果正常返回一加一反方二对不对,那这个是很固定的,就像我们这插头很固定,那如果我想用这个方法,任何数都可以加,那我们加两个参数XY对吧,这块返回X和Y一样的,所以插头作用就相当于我们,我们正常声明为组件,声明一个组件就相当于你一个默认的一个方法,那插槽呢,就相当于我们多了一个参数。那是不是就可以对函数的行为方法的行为进行扩展,那插槽呢,就可以对模板的功能进行扩展,那这个时候你看啊,我这块不叫插头了,就不叫提交按钮了,我这块换一个,我换一个标签,叫做SRO这样的一个标签,我放在这块,放在这块的时候是什么内容都不显示的,对吧?什么内容都没有,但是呢,我在用这个组件的时候,你看用组件的时候,当原来没使用插槽的时候,中间我放任何内容它都会被抹去,对吧?但是我用插槽中间放的任何内容,比如说一行A。
06:01
你看就会把这个内容替换,我们插槽里边的内容是这样,那比如说这块替换的我们是什么?我们是一个Bo to,一个按钮,这里边写个嗯,提交提交,那这个位置我们放一个,比如说A链接,AAA链接,然后这块我们也写个啊提交,你看有的是用按钮提交,有的是用链接提交,看到了吧,那这个我们再加一个,我们就是用一个呃,Div标签div,当然这里边也可以是其他的组件。如果你包含其他组件的话,里边可以是任何的标签,也可以是多个标签,比如P111,那我再来两个,你看。这个好换行了,放到这了,对不对,那我在这里边可以加很多的标签,也可以是用组件都没关系啊,你比如说P标签里边来个111,再来个来个B标签来个二二。你看放进去都是没问题的,所以呢,看80%相同,只有20%不同的时候,那我们用插槽就可以解决这样的问题,这就是插槽的作用。
07:04
看到了,这就是插头的作用,很好用。很好用啊,那就可以改变里边不同的样式,那如果我们在变相一下,那如果在插槽里边,你看我几个按钮,假如说两个。你看啊这样啊,在这里边我两个里边用的,假如说都是一样的,假如说这个用的是这个按钮,那我这里边儿用的还是这个按钮。你看这两个样子对不对,那两个一样的,只有一个不一样,怎么办呢?那我们可以在插槽里边,其实是你可以声明缺省值的,比如说我们把这个摘过来。你看提交粘到这个插头里边,那如果我在使用插头的时候,没有存任何数据,没有存任何数据。啊,没有传任何数据,那么都会用到默认值,都会用到默认值。你看都会用到默认值,那如果这里边用值了,就像就相当于我们在生成参数,如果没用这个参数对不对,它默认等于一对吧,默认等于二,那如果不传值的话,默认S就是一,默认Y就是二,跟这个道理是一样的,所以呢,我们在这块如果在使用的时候,如果不传值全是按钮,那如果在这块写一个A标签,这块写个提交,你看他就会把这个替换掉。
08:12
这就是我们在使用插槽的时候,你可以有一个默认值,当然这个默认值可以让别人去改变,对吧?如果大部分都是一样的,只有个别的组件在用的时候不一样,那你就使用这种默认值就可以解决这个事情。这样,那有的时候又问了,那除了这里边有提交按钮,除了这里边有提交按钮,那如果我还有一些其他的信息呢,提加其他还信息呢,比如说提交,咱们假如说假如说同一协议啊,或者是其他的有很多其他的地方呢,那我们这里边就可以声明多个插槽,你比如说这块这是一个插槽,对不对,那我这块再来一个SSLO2个插头,这里边默认显示。嗯。加不加都可以了,加油吧,那有这会加个二。你看。1122看到了吧,如果我有多个插槽,那么我这里边放的内容,它会替换哪个呢?你看到了吧,只有这个传内容了,它会将三个插槽的内容对吧,全部替换掉,那有的说我这个A链接,我就想替换第一个插槽,第二个第三个不替换。
09:16
或者在其他的里边,我替换第二个,替换第三个。怎么办呢?没有办法,怎么弄看好了,我们给插槽起名字,这就叫句名插槽,你比如说第一个,我起个名字叫name。起个名字叫什么呢?假如说叫Y第一个插槽,那第二个起个名字,我们叫做to第二插槽,第三个我不起名,或者是我这个。嗯,我就第三个不起名了,你看不起名的时候。如果我们做一个提交,他会把你立起名字的。给附上值,给替换掉。插入到里,就是你在副组件里边写的这个组件,或者是API标签,或者多API标签会完全找到这个没起名字的,那如果我想就用起名字的这个对吧,你比如说我在这块在使用的时候,我们直接在这块使用s rot加上起名字有个Y,我只想把第一个换掉。
10:10
熟悉下。那提交外。啊,这个还在这。在这块,Slot。SL。来,再刷新一下。没有过来是吧,还是在后面。应该把第一个换掉,其他的不换掉,那我们现在用新的语法,这是老的语法啊,老的语法他没给我包错,但是呢,也没有用这个对吧,那我们新的语法什么呢?新的语法我在替换的时候。必须使用什么呢?要把这个名字去掉。用新的语法,那外层替换插槽的必须使用temp,使用模板,使用这个标签放到里边,然后在模板标签里边,模板标签里边使用V杠,使用指令的方式,Root使用这种插槽的方式,那我们在这里边如果使用def def def before,缺省的。
11:06
那么我们保存一下,你看。默认如果不写和直接写缺什么,他还是提问这个,如果后边我指定名字,比如说这块Y。你看就会放到第一个来对吧,那同样如果我在这地里边专门加上把这个吐换掉。它就会在two这块有效果,那每个里边替换插头,那在一个里边能不能有两个呢?你比如说万有一个,那我这块再写一个缺省的deff,缺省的和咱默写是一样的,你看也可以对吧,也就是你想。插槽这块如果起上名字,插槽这块如果起上名字,就是具名插槽,具有名字的插槽,那在使用的时候呢,注意细节一个什么,一个是必须使用这个模板。模板标签,然后通过V-soft,那个在Ve2.0之前直接soft等于那种方式了,但是之后都变成这种方式了,都变成这种方式了,那这样的话,我们就可以给任意带名字的。
12:03
你看啊,可以指定上,如果你加这个是缺什么,当然了,我们有简便方法,比如说这个。简写方程井号。刷新一下我得看你他不刷新,你看刷新一下看效果也是一样的,对吧。可以用这个井号简写为方这个方式。但这个一般咱们常用,咱们还是用ver soft就行了,嗯,放这块给你放在这块就可以啊。所以呢,这是呃插槽具名插槽的一个应用,可以每个插槽写参数,那么我们模拟的就是相当于嗯,做一个方法,可以加参数,参数呢也可以有缺省值,那我们插槽也是一样的,是这样可以有缺省值,也可以有默认的,也可以带名字的,按名字去替换每一个插槽的内容,那么还有一个就是作用域的问题,什么作用域的问题呢?那如果我这个里边的数据,你看我是在外层里边,在这里边我有个BAT,现在是在副组件里边啊BAT。
13:01
加一个,比如说呃,你随便写一个name,这里当然正好我们得一个,那我们几个name这里边写个A,随便写了吧。Hello,有这个名字,你这块当然得加上括号对不对,那如果我在这个里边插头里边提交按钮,使用插值的方式,我们起什么,那肯定是副组件的对吧,你看二楼对吧。这块给兔这块起个名字哈吗。内容这块对不对。肯定是用父组件的,但是有的时候呢,我们插槽的时候,就子组件里边已经有数据了,我们插槽是在负呃负组件里边传到子组件里边去的,相当于是这样通过插槽的方式插入进去的,所以插槽里边写数据是相当于在不组件里边已经把数据渲染完了才放到子组件里边的,跟子组件没关系。但是我能不能在插头里边对吧,我只是传格式过来,但数据还用到子组件里边数据呢,你比如说这里边,我们在这里边用到开头这个数据。这里边嗯,你比如说我换换一个吧。
14:03
我这里边换一个优用户。有有点卡卡住了啊,换一个用户,用户这里边有个名字叫做呃,Edu work。你看。现在我是在子组件里边声明的这个数据,那这个数据在这里边,每一个里边肯定是可以用的,假如说我有多个用户的话,那我肯定是便利多个用户对吧。便利都用数组,那单个值也行,数组也行,现在呢,我就想把这个用户让副组件里边去用,你比如说我们在呃。学生这块吧。缺省的这个地方,那我们用一下怎么用呢。差值用user.name。E work e work可以对不对,那么我们能不能在插入值的时候,我不用这个也是值这里边儿的数据对不对,但是我这块不使用。这块不使用,那么我们默认值这块就没有对吧,但是我想在父组件里边用到子组件里边,这个数据通过插头怎么传递呢?那么一种方式是在这块,我们通过在这块声明一下。
15:09
声明一个什么属性。证明一个属性,比如说我们叫做user。User这个属性相当于这会我们命名的一个属性啊,自己命名的一个属性,这个user sir是谁呢?就是我们的user,我们在使用缺省插槽的时候,相当于这个插槽,反过来跟我们不组件向子组件传递数据一样,那我们反过来在子组件里边通过属性自己起的一个属性,把这个user这个数据,也就是整个这个对象对吧,放到了这个插槽里边。插槽标记上,那我们在使用插槽的时候,那我们就找这个,因为我在这个缺省的没有在名字插槽上加,对不对,那咱们就找一个,这里边哪个是在缺省diff对吧?在几后这里边我们等于起一个名字,随便叫一个什么名字都行。叫一个什么名字都行,比如说我叫他,嗯。嗯,Sub这块也是自己命名,那这个时候我们在这块应用的时候,你看通过插槽不带名字这块过来,那我们这块加上。
16:07
差值数据这个就能够代表什么呢?代表我们插槽上面的。属性,但是呢,所有的属性,但是我们访问某一个属性,那就是什么sub date.user这个user就是我们哪个里边呢,User就是我们的这里边给我们指定的user。因为放到这个插槽上了,那还是缺省的插槽,没有起名字的第三个插槽,对不对,那我这里边呢,在缺省上边随便命了一个名字,那通过这个名字就能找到这个插槽上命名的这个属性,那这个属性命名它代表就那个对象,对象里边,那你看一访问学生呢,还是一流。所以如果需要在副组件里边用子组件里边已经有的数据,不是说在副组件里边直接传过去的,传位是在副组件渲染完的传过去的,对吧,这就叫作用,副组件里边能用到子组件里边插槽的数据是这样的,那有名字的怎么用呢?比如说这个有名字的数据,我们现在不用自己理name,用里边的user name,现在这里边自己的name不是什么,不是hello吗?对吧,那我们一样在这块直接指定什么。
17:14
指定。小兔。你看我们直接用这个微发素指定to的话。既绑定了那名字,那我们吐掉。User user点。一丢啊,当然我这个名字这块,这个只是呃,使用username这块,这是缺省的,因为没指定名字,它跑指定跑到缺省那去了,所以我们在to这块,我们也用什么呢?一个冒号user等于user。再说明一个。那我们在这块用这个名字的时候,你看我们把这个链接换成我的名字,那这块我们其实可以用。这块指定这个这个名字吧,咱们就直接指定了,呃,还是用这个to。指定这个图,然后等于。等于这多了一个引号,等于这块我随便起个名字,比如说叫做hello,你可以随便命名啊,因为这底是全整的嘛,这块随便注命名一个名字hello喽,那我这块就得。
18:09
怎么样,这个user就会付给我这个用这个名字这块的,找到这个hello hello代表的user这个就可以。让我刷新一下。网络。今天网络怎么错?这写算了,因为指定hello的话,我这块得什么得是hello,对吧?H he l就不能入库了,你要这用hello,这个hello接收的就是子组件里边把用户不给这个user,你这块是自己命的名字啊,自己命的名字,命的名字user,这个user是这个组件里边传过来的,这个user指的是这个数据,那我们在这里边就可以用到这个数据了,来我们刷新一下。但是。好,我们看到那个默认的幺幺就没有了,对吧,这会儿加上这个,那我们同样可以把这两个模板。
19:02
放在这里边,这块是缺省的用的,对吧,这块是第二个用的,那给它用上不同的数据,那我们刷新眼,你看两个一物都可以了,都是用到子元素里这个,那我们这块可以随便命名,那我这块假如域名UC2UC2,那U32的时候现在就访问错了,那我这块访问的属性名就是UC2。对吧,来把这关掉。也是一溜一溜就可以了,所以要知道这个名字,这是子组件里边的数据,可以让父组件里边去访问,当然是插槽,应用插槽的时候。不是从外边往里传数据,而是直接用插槽里边的子组件里边的数据的时候,我们用的这种方法,这种用的是比较多的,因为数据已经在子组件里的,只是我在插槽传的时候,相当于传的样式不一样。也相当于全的样式不一样,但是数据还是用原来的不动。那这是跟原来的规则是没有改变的,相当于那如果我数据从这块儿传进去,对吧,那就是数据变化了,和不用插头是一个道理。
20:04
所以插槽在我们这应用比较多的,不管是不同的广告位对吧,头尾有好多地方都是啊,那我们再看一下呃,它的官方手册,插槽这块你看。这里边有好多,当然咱们都讲过了,使用插槽对吧,这块生命一个插槽,我们在传递数据,可以存组件,然后什么是居名插槽,什么是嗯。这些在模板里边起名字头尾全省的的,你可以自己看一下,基本上咱们能用到的都讲到了。那以后咱们在写项目的时候,后期咱们在写项目的时候,我也会大量的应用这样的插槽,那用到的也就是这点知识点,所以呢,像使用插槽大家好理解,然后呢,具名插槽也好理解,因为有多个位置需要用插槽去替换,那肯定得起个名字对吧。那只是一个作用域的范围。在副组件里边,在。使用插槽的时候,用到子组件里面的数据的时候怎么办?那就是这样的一个结构。
21:02
大家做个实验就理解了啊,这节课我们就讲到这。
我来说两句