00:00
大家好,我是学习园地的特约讲师高若峰,下节课呢,我们了解了一下组合式API,那在传统的我们在写每一个组件的时候都需要写option来配置方法,对吧?这是写组件时候的一个问题,那传统的方式呢,是导致维护非常复杂,代码复用性不高,所以引入了corporation API。也就是API就是引入了一系列的方法对吧,那这些方法呢,就能帮我们解决维护复杂,复用性不高的一些问题,那所有的东西呢,都通过set up入口文件引入的这些API,那我们再来看一下。这是我们上节课体验的,呃,一个例子,简单的体验了一下啊,那这节课我们看一下,既然所有的组合API的入口文件都是setup,那我们就得先学习setup,然后呢,所有的API就是。他给我们提供这些API的入口吗?都要写在set up里边,所以呢,我们先对它有一个了解,那了解它呢,我们要知道它的调用时机,它的这次指向,它的函数参数,还有它的返回值是这些,那返回值呢,那我们用过了,那这里边呢,我们就看一下调用时机和这次指向,还有函数参数的这样的问题。
01:05
好,我们在这里边,这是我们前边呃写的这个程序,那我们给你保留,那我在这里边再建一个,比如说我在建一个页面,专门是入口文件新建一个每开吧,那这里边叫做呃,Set up setup这个组件,那我们加了一个组件,这里边set up对吧,我们先这是组件里边显示这个内容,这组件我们在哪显示呢?那我们得配置路由,因为写的是大页面对不对?所以在路由里面我们配置一下,配置一下新复制一个。在这里边路径呢,我们就叫呃,Set up,这前面咱们学过的我就不多说了,引入的组件就是我们刚建的setup这个组件,然后呢,我们导入这个组件,这样的话可以单独的一个文件叫做site啊,那路由写完了,路由写完了之后,那我们到呃这个APP里边,那我们加一个。加一个这块肯定复制一下到在赛啊,然后这块写上。
02:03
入口。Set啊这个方法,然后我们这块也把这个竖线复制过来,来看这个风格统计一下来,我们打开我们的页面,我们看一下,你看这块就入口API了,点击一下setup,那他想做这个setup呢,咱想试出它的参数,那咱们在这个setup下边再加一个子组件,那子组件呢,咱们假如说不是单独页面,那我们就建在这个下面新建一个子组件,随便起一个名字啊。在这个里边我们叫做呃子组件sub cot吧,就随便定了一个名字叫组子组件的一个名字,在这里边显示一行,一看这里边能不能显示,那子组件想在我们setup里边用,那首先呢,我们import首先得导入对吧,子组件对吧?然后我们在这里边得注册一个comp,注册上这个自组件,得到这个注册完之后,我们在页面里边使用这个子组件,使用这个子组件这里边这是呃,Set up组件组件对吧?然后呢,下边应用子组件,这是。
03:08
嗯,子组件咱们直接写在子组件里边就行了,然后sub b cup使用一下子组件,这样的话,子组件一行一对不对,在他们组件,那我们在这里边写上,这是这是子组件。你看这是子组件,So,给你分清楚啊,这是组件,这组件在两个组件里边显示的这个,那我们看up,那我们就在子组件里边使用,你在哪个里边使用都行啊,入口文件是set啊。这套。咱现在什么也不存在这里边,那我们打印一下,你看LG我们打印一下这里边set啊,打印一下这个。然后呢,我们看一下它调用时机,它也是自动调用的,你看下边是自动调用的,它在什么地方调用的,我们记得有构造方法,Before be啊,Before be fou啊,这个创建你看这块我们。
04:05
掉下这块rog,我们打一下be re与否,Create。但这我们加一个棕色啊。Be for括号我们这块来一个顶顶顶对吧,哎,你知道是交的方法,然后再写一个c reed,这两个是最先创建的,对面所说任何组件在加载的时候都先创建的这个这个先执行,然后呢。在创建之前,然后创建组件,然后挂载,挂载之前挂载对不对,这几个方法RO。那里边c re TED这方法我们这块有包福吧,随便区分了三个,你看我们刷新的时候就用。刷新,我把这个清除一下来,你看一下。你看一下他在哪调用对吧,先执行的这个,然后执行的这个,再执行的这个,所以setup,我们调用试机是在这两个方法之前调用的。
05:02
在这两个方法之前调用的,所以在这两个方法之前调用,你看我这里边。Set up,你看组件在创建组件之前调用,所以在萨班之用中,组件实例并没有创建,那组件实例并没有创建,你看啊。这条语句不对,它是在那个之前创建的啊,你看既然在这个之前创建的。来,我们再打开这个。看到这个在这个之前方点对不对,所以在这里边我们打印一下,这你看在这里边我们打一下this log。然后我们这里边这,然后我们在创建完之后,创建完之后我在这里边再打一下this cons LG。这你看这俩什么区别?那我们执行完,我把这个重新删掉啊,这个给你看一下,你看创建完setup打印,这次安的没有命,因为这个时候还没有组件呢,所以呢,这次呢,不知道代表哪个组件,而这个时候执行到这个生命周期的时候,是不是我们已经创建完了组件了,对不对,已经创建完组件了,那这次就代表的就是这个组件,当前的这个组件。
06:07
所以代表当前的这个组件,那这次呢,就可以访问这里边这一台什么的数据,而我们在这里边是访问没有这次,这次里边你就不能用,所以呢,你访问不了,比如这里边我们有一个。点这个方法ITY一个呃,对象。每天一个对象,但正好我得加盖这里边比如说有个MSG。ABC,嗯,这里边这是一个BATA2个点,我随便写了一个,那在这里边我们其实是可以创建的,比如说这点对吧?呃,MSG。你看这是这是可以的,因为它代表这个组件,那就能访问这个组件里边状态,也就这个组件的数据,而我们这里边这次什么也访问不了呢,那这次也什么都访问不了,对吧,也就相当于没有这次这里边一定记得在up里边。为什么没有这,因为它是在建组件之前,在创建组件之前,对吧,调用的调用的没有这这点一定要清楚,所以呢,这次不能用,那这次不能用,那如果我们从其他地方传过来一些数据,那我们怎么去访问呢?对吧?当然这里边的数据本身的数据,我们直接用数据直接访问,像上节课体验的,你比如说在这里边直接用这对象之类的,我们访问,你看这里边哪用了,这次一个这都没用,对吧?所以这里边是用不了的。
07:30
那用不了,那我们再看一下,如果我们存参数,存副组件set up这副组件对吧,这是set up组件,那我们像这个组件存参数,你比如说我们存一个。Y的参数等于一行一。我们传一个兔子参数等于一行二,你看我就随便传两个参数,当然这里边是变量,我们就去,如果是变量的话,我们得这样对吧,那不是变量,我们就直接这么传就行,那在这里边接收这两个属性,怎么接收呢?是不是我们得用用这个对不对,两个属性,那我们可以用数组接收one和two对不对,当然了,你也可以用,你可以用对象,一般我们都用对象,这样就行,然后呢,我们再写上万的属性这块,给个类型,你或者给确认值什么都可以,对不对,给类型字符串,当然我传的都是字串,那我再来一个兔子属性。
08:20
TW数的属性,那给个类型是,呃,也是字串,这这几个都都字串,但是你给数字其他都可以,那我们这一下现在就没有错了,因为你不声明给属性,你在这里边不指定属性的话是不行的,对不对,那现在没有变化,那如果我在这里边,你看我们其他的里边,如果有这次的话,我们是很容易访问到这个属性的,根据传过来的属性,我们去请求服务器啊,对吧,去做一些请求服务器那个API去做一些事情都可以,对不对,那你看这里边我们就可以直接访问Y对不对,或者是this连接上this里边的to,你看直接访问属性是没问题的,一和二对不对,但是在这个里边我们怎么访问就访问不了,所以呢,在setup里边有两个参数。
09:05
有两个参数,接收这个参数就是接收所有的属性,咱们先一个一个看接收这个参数。你看如果我们想接收副组件往我们子组件里边这个属性,哪怕是变量也好,或者是一个自串也好,我们有的时候呢,在这里边,因为所有的程序我们都在这里边处理,对吧,不在我们的像met hods这里边去处理了,对不吧,因为我们使用嗯,Cos API就是组合API,所有的入口都在那些API都得在这里边写,也就是我们用的S那个方法什么的,那些API都在这里边使用,所以不在这边使用,那这里呢,有的时候我们需要介入属性值,那在这块第一个参数就是接受这个属性,那我们在这里边答应一下pros。当然你一样得写这个啊,不写这个的话,我们属性是你是接受不过来的,对吧,所以我们接受过的属性点rog,你看它是一个对象,这个对象里边就包含这两个属性,那我们在这块我把这个去掉刷新一下。
10:01
你看在这个里边包含了one和two这个属性,对不对,所以在这里边想打印one就不用这次了,用它就可以了,直接one加上pros里边的点to,你看刷新一下一和二是不是一样可以打印,所以用这个去接收负负组件传给子组件的属性,用这个参数,当然我们这个API里边专门在S里边,我们专专门有API,是处理父子之间传递属性的,而且呢,呃,可以是想应是数据的那种啊,但是你用这种简单的传递去接受也可以啊,也可以,那这是我们在set up里边这个属性,那第二个属性是什么?你看我给你另一个名con什么意思啊,是不是指的是上下文啊,对吧,这里边儿。嗯,这个指的嗯是传过来,传过来的属性,传过来的属性,那这个cont指的什么呢?是上下文对吧,那我们在里边也用过这个。
11:08
对吧,上下文。就比如说在那个action,呃,V action里边用过这个上下文,那它代代表什么呢?就代表我们调用setup里边的什么副足组件之间的上下文,那里边有哪些方法呢?里边有哪些方法属性的,你看第二参数这个里边有这么多也是代表属性的,代表什么,代表插槽的对吧?代表负对象的,然后代表根的,代表eit的,代表FS的,你看这里边请求IFS,那咱肯定知道是上边你用一个if引用对不对,在这里边的我们就能找到组件里边的这个if,就从这里边找组件里边的元素对不对,那这个呢,是提交在附类附件的找根的,这里边简单用几个,比如这个代表属性和第一,和第一个属性差不多。你看那既然这里边你看它代表上下文,那我们直接用法有两种用法,第一种用法这块我在这个下边想,这个下边我打印出来一和二嘛,对吧,你看打印出来一和二。
12:03
打一和二,那我在下边再写的话,会在这个一和二下面打印这块有个没定义的嘛,然后一和二,那我在下边这块在打印的时候啊,Cont里边点ATT。rs.lg你看我打一下这个代表着什么?那。代表的也是这个。啊,属性get啊。成果参数。这样吧,我直接访问这里边吧,你看啊,直接访问这里边,能不能访问到这里吧。呃,氨体范的没有定义,At tr代表的是count at tr里边啊房。看一下我们这样的话,访问是没有定义的,对吧,你看这块氨基发的没有定义到。那为什么呢?因为我们像这种定义的属性,我们是不是通通过它传递过来的,而这样的属性我们接收的时候,详式对象我们是通过在这个里边purpose里边定义的这样的属性,对吧?所以定义属性已经就跟它差不多,但是这个呢,已经通过它传递过来了,我们有个one和two对不对,但是你看我这里边再给你做一下。
13:19
如果我们在副组件里边,我们再传一个,比如说呃,DEC描述,等于这块我们就一行大A随便写了一个,你看我们传递的这个属性。传递的这个属性在我们这块,对吧,是没有,相当于用它接收对吧,没有定义,没有定义的属性,那我们通过这个参数肯定就接收不到对吧?你比如说在这里边我们再加上一个点DEC,你看能接收到吗?我们先别管这个下边的错误,你看。后边氨基范的没有定义对不对,这块是接收不到的,但是呢,我们没有用它声明的这个属性,就是没有在这声明的属性,也就其他的非响应式对象的那些属性,那我们在这块DEC你看我们就可以接收到。
14:04
来,你们刷新一下。核新一下,你看在这块一行8A就可以接收到了,所以呢,分两种情况,这种传递的对吧,我们在这块使用泡泡声明的,我们才能用第一个参数接到,那其他的非享是数据的,那我们在这块才生才能接到,所以呢,At加S就代表的是属性,你看下边是注释。对吧,你看。是不是at点代表D这个属性告诉我了,对不对,那这块给我们的一个警告是意思是传属性,你没有什么,这V是VE本身的一个警告,对不对,当然没关系啊。我们也没有这么用的,我们用的时候都是通过这个传,但是呢,你没有用这个接收的,那我们就可以用at tr接收,是这个意思。这块,那我们说这里还有什么属性吗?还有。像嗯,这里边还有像这里边的插槽和em MIT这两个,我再给你弄一下,这都是稍稍复杂的一些啊,你比如说呃,插槽的,我们想获取插槽对象的,那我们就需要在这里边声明一个插槽,So啊slot插槽这里边比如说默认数据我是一行九吧。
15:10
假设默认这样的数据,你看啊,这块我们来一个PR。你看插头数据落人数据实一行组对不对,那我们现在想给这里边插入数据,是不是我们就得在负组件这块中间的这里边在这块我们加上一个H1。啊,H2H1都可以吧,加H2我们加一行八,你看它是不是就把插槽里的数据给我们换掉了,用这个H2给我们换掉了,对不对,那既然插槽我们换掉了,那我们在这里边就可以,因为是过取上下文嘛,在这个里边。子组件,我们就可以通过另外一个方法,就是con t ST上下文里边除了有那个接收其他的属性之外,那它还可以接是啥呀?比如说slots,这是负数S什么插槽对吧?点rog我们看一下能不能获取到。你看在这个嗯的角。
16:03
所以呢。你看在这块。获取到这个插槽对吧,那获取插槽里边里边的,比如说缺省的插槽,或者是具名插槽,比如缺省的def at获取缺省的插槽,插槽假如说有很多插头插过来对不对,那我们获取缺省的这个插槽,你看能不能获取到啊。呃,一行A下边这块你看就过去到了,对不对,HR的这个类型插头里边数据是一行八对不对,如果你需要用到的话,那么就可以从这里边获取副组件传过来的插槽,就插进来的内容可以在这块,这是传的属性内容,这是插槽插进来的内容是这样,那我们还需要什么在子组件向父组件通信对吧?父组件给子组件通信,我们用这个子组件给父件通信的时候,如果在其他的地方方法里边我们是不是可以用这次点高了福EMIT这个方法对不对,这个方法里边我们处发。触发的一个一个方法,一个事件,对吧,通过它来触发,那这是我们在,呃,通过事件向负类去传递,传递参数,那我们这里边也可以触发一个事件,你比如说。
17:11
我在这里边做一个呃方法。这样吧,那我们还在这里边随便写个方法吧,比如说呃,做一个叫做什么方法呢。嗯,随便的一个方法吧,比如说ad啊。给付磊添加。这边没有添加的方法吧,我就叫他一个添加方法吧,然后存一个呃字串一个串S一个串。让过去。那这个时候我们就需要在这里边,如果我们不是在别的地方,在这块,如果我们想给负里传数据,给负里传数据,那我们就可以叫什么,我们就可以叫center里边的什么。DMIT,这个方法,这个方法我们需要触发一个事件,触发一个事件,比如说ad。处罚这个这处罚事件不用说,在这里边声明。
18:04
触发一个事件叫做AB,这个因为得调用负类的,对不对,是负类得必须得有一个自定义这样的事件,比如叫做我的ADB吧,加一这个,然后传个数据,我们传,嗯,传什么呢?传向。啊,向负组件传数据,传一个这个带一个参数,那么它通过调用负类的这个事件把数据传过去,所以在负类这里边我们就得绑定一个事件这块,那事件就是MYADB,随便了一个MYADB一个事件,对吧,那处会处罚这个事件,这个事件就用一个比如说ADB的方法。要用一个A的方法在这块,所以呢,我们在这里边,因为它有事件之体被处发,对不对,所以met DS我们会触发一个方法,就是ad这一个方法里边加一个参数,也在负类的声明啊,加一个str,然后比如说 Str.LOG100相负类传数据,这是负类的中的方法,你看父组件种方法,我在子组件里边,通过它让负类触发一个这样的一个事件。
19:07
对吧,那负力处罚一个事件在这里边就会调用这个方法接受参数。也就是触发了自自己定义的这个事件,不是奥克之类的那些事件啊,来我们刷新一下,把这个清除掉。刷新一下。大家往上看啊,你看是不是调用的这个了,向父组织传递数据,这里边被执行了,数据传过来了,所以呢,父子组件之间传递,那我们就可以使用这个方法,当然这里边你看我们是获取上下文,它可以里边有多个方法,那我们接收的时候。嗯,这个我们给你复制,我给你复制一下。出心。然后登记一下。当然不能起两个方法,我给你这一下,那我们如果想获获取上下文的话,那我们可以这样去做,把这个我们改成这样解构赋值对吧,把那里边直接都取出来,声明单独的,比如说ATTRS和什么slots和em MIT对吧,单独解构出来,那这样的时候,我们调用的时候就不用通过它来调用了,我们直接这样调用就行了,这个也不用通过它来调用了,这样调用就行了,这个也不用通过它来调用,这样就可以了,你就直接解构出来了,来我们刷新一下。
20:17
邀请一下。但这个报是我们没有那个声明的目的就是要这个数据,你看都可以了。OK,是这样的,这就是我们的,当然这里面还有一些其他方法,你愿意看,你可以试一下,那几个都常用,就这几个偶尔会用一用,对吧?所以呢,我们在学这个组合API之前,我们要知道入口的setup,我们下节课开始学习的每一个API都必须就是调用的,每一个给我们提供的新的方法都要写在这个setup里边,那我们得对本身的setup了解,它需要两个参数,需要两个参数,这是接入属性的,这是这些当然不见得能用上啊,但是你得知道,然后这里边我们通过组合API调用的,比如说有十几个API调用完之后,那我们这里边想讲的数据,那我们直接是用的方法。
21:04
对吧,讲的数据,比如说。MSD对吧之类的啊,这节返回这页面就可以使用了,那是我们下节课我们再再开始说了,那这节课呢,我们就先讲到这里,下节课我们开始一个API一个开的学习。啊,谢谢大家。
我来说两句