00:00
好嘞,各位,在这一小节呢,我们给大家说一个开发中比较常见的编写方式,就是组件的嵌套,本身这个东西吧,它并不难,甚至这个里边连一个新的API我们都没用,用的全都是讲过的东西,甚至都是刚刚讲过的东西,但是总有人说,哎呀,这个组件的嵌套咋这么难呢?同学你知道为啥吗?是因为啊,有些人对一和二啊,本身他就不熟,听的时候迷迷糊糊的完了代码呢,一遍都没敲,觉得自己好像诶可以定义组件了,实际上你定义一个正常组件你都写不利索,然后同学你想想,你去听这个嵌套,哗来了一堆组件,套来套去的,你说你能不晕吗?对吧?强烈建议大家,如果一和二你真的是一遍都没有敲,暂停这个视频去敲一遍,哪怕就一遍对吧,然后你再来听这个嵌套,好了,同学,咱们说说吧,什么叫嵌套呢?来,打开这个图,不用看别的地方,就看这咱们就能整明白什么叫做嵌套,蓝色圈里的这个组件代表的是它。
01:00
对吧,下边这两个橙色圈的组件其实代表的是这个,还有谁呢?这个从左侧这个图上来体现啊,那就是蓝色的组件里面又包着这两个橙色的,对不?那从右侧的图上体现,就是蓝色的组件和这个橙色的组件是有一个上下级关系的,蓝色在上啊,橙色呢在下,哎同学,这种关系就叫做嵌套,而且呢,我们给这个蓝色的组件统称为呢副组件,我们管这两个橙色的组件统称为呢子组件,OK,是一个父子关系。回到代码里,咱写写了各位,我不再一点一点写了,对吧?关于定义组件,注册组件完整的流程我们已经写了两遍了,所以说接下来复制啊,找到之前定义组件的地方,找到创建VM以及注册组件的地方,复制回到这里粘贴。然后这个注释呢,我写着详细一点啊,School组件,因为一会儿呢,我会写很多的组件,哎,防止写着写着呀,大家就不知道我写的是哪个了,哎,这是school还是这个结构,还是这个数据,OK,这些不变,折叠起来,在这儿继续写注释,创建VM啊,这个东西我不要了,哎,所有的东西都是在组件里面的,我不在自己写数据写结构了,哎,这会儿呢,我暂时给它删掉,走同学这会儿写好注释,叫做注册组件,写个括号啊,局部OK,那这儿呢,也是死故,既然能简写,那就简写,OK同学,定义好了,注册好了,接下来呢,是不是得编写组键标签,要不你这个组键就没有人用了,School右键打开看效果,走控台呢,也没报错,找到view开发者工具,VM在这儿自身是没有数据的,诶,School在这儿是有数据的,OK,接下来我提需求,我还想再创建一个组件,叫做student组件,这个student组件是作为school子组件出现的。
02:53
也就是说是school里边包着这个student OK,谢写,先不说那么多啊,各位,我是不是得创建一个student组件呀?啊,那跟这儿的逻辑都是一样的,所以说我给这折叠这折叠,把这一堆给它复制在这再来一个啊缩进的给它调一下走,叫做定义student组件,把这student复制这儿,这儿对吧,不叫学校名称了,哎,那叫什么呢?叫做学生姓名,那这会儿呢,也叫name,这不叫地址了,叫做学生的年龄啊,这儿不是address,这叫age OK,那这呢,改一下age,年龄呢,是18岁,好,两个组件呀,我都定义完了啊,那说老师那就用呗,多简单呀,在这写一个student,这不就可以了吗?上边再写一个student组件标签,这不就完活了吗?回头一看,老师你看多好啊,有school,有student,但是我问你,他俩是父子吗?不是他俩有嵌套关系吗?没有,Student是在school里面吗?没有,所以说。
03:54
同学回来你这么写是不对的,你觉不觉得这么写他俩就平级了呀?哎,所以说各位student不要注册在这儿啊,那你这儿呢,就也不能写这student老师,那我注册在哪儿啊?听我说把student这个组件注册到school里面,也就是说你可以在这儿继续写一个配置,别忘了小逗号在这写一个什么呢?叫做components啥意思?组件?同学觉不觉得套娃开始了,School本身是一个组件,诶,里边居然还注册着一个别的组件,是不是好谁呢?Student对吧?哎,那好看点写就是回车写个student,但你这么写吧,同学,从语法上来说吧,是没啥问题的,但是代码一执行啊,可能会出现问题,就是一个先后顺序的问题。同学你看一下走,他报错了,说不能够使用student,在它被初始化之前,很简单,各位就是在这你用student的时候,Student还没有定义呢,是这意思不?哎,所以说各位你把student呀,给它放在之前定义。
04:54
的就好了,哎,说的再直白点,各位,你把你的student组件你准备好了,这边再去注册对不对?所以说写好注释,这也叫做注册组件,这也是什么呢?局部的同学,现在出现了两个局部注册组件,对不对?说说吧,School这个组件呢,确实是局部注册的,注册给谁了呢?注册给这个VM了,那么这里的student呢,也确实是局部注册的,那注册给谁了呢?注册给了school这个组件。
05:25
说老师那这样的话不就是正常用吗?那student我也写在这儿呗,是不,老师这不就得了吗?你这样会报错的,各位,他说没有student,为什么?很简单,各位你给M注册东西的时候,我就问你,你注册student了吗?没有,你注册的是什么呀?School,所以说在这个VM所管理的模板当中,你只能用谁school,不能用谁student,说老师,那我这student得写在哪呢?同学注册给谁了就去谁那写,你注册给谁了呀,注册给了这个组件,所以说默默的打开它的结构,在结构里边最后一行补一个student OK,完活儿体会一下注册给谁,那就去谁的结构里边写好,这回回头看效果刷新一波,同学,学校出来了,学生呢也出来了,从结构上看啊,同学就表面上来看,你就看这几四行啊,你看不出来谁是父谁是子,借助开发者工具一目了然,各位school居然能打开了里边。
06:25
A student同学,恭喜你完成了一个最基本的组件嵌套。哎,说老师,那这块怎么体现呢?这块吧,你就得右键检查看一下解析完的结构了,各位慢慢捋,红色框的谁呀?那个大的div wrote,对吧?里边这蓝色的div是谁?是school?哎,那就打开这个蓝色的div,整个这些都算是school,但是你别忘了school里边有一部分结构,哎,就是这橙色的是来自于哪儿啊?来自于student,你打开这不就是student吗?是这意思不对吧,各位,哎,组件的嵌套,说老师,那就讲完了呗,这还挺简单的,还可以是吧?同学来,为了演示问题呢,我还得再创建一个组件,那这个组件叫什么名字呢?叫做hello组件,哎,这个组件呢,很简单,各位就是写一个欢迎词啊,走,你是不是也得写了一个template呀,那这个东西呢,我就让它非常简单了啊,我就写一个H1吧,哎,然后里边呢,写一个差值与法去读一下这个message啊,在这呢,写一个逗号得配置数据。
07:25
啊,得写成函数,得返回一个对象,里边有一个MSG啊,随便写一个吧,叫做欢迎来到上硅谷学习,来一个感叹号,OK,写完了同学再给他复制一份啊,这叫定义一个什么呢?Hello,组件。折叠起来定义好了一个hello组件,那你听我说各位啊,Hello组件呢,我想让它跟school组件是平级的,那我得怎么写呢?简单在这写一个hello,上边这儿写一个hello是不是就可以了?OK,回头看看效果啊,刷新一波,借助view开发者工具去看同学看看啊,这是谁VM,这是谁school,你看你这一选左边就给你一个高亮,这是谁hello,那我想让hello呢,在它的上方,那你就调整一下这个顺序,在这调整啊,在hello这块给它放在这儿是不是就可以了,回头一看是不?Hello在上方有school school里边还有一个,那同学呢?再说一个开发中比较常用的手法啊,就是开发中啊会定义这么一个组件,这个组件的名字很有意思,叫APPAPP其实是谁的简称呢?各位是application的简称,哎,Application什么意思啊,叫应用,哎,就指的是你整个这个外围页面,那这个APP组件是干嘛的呢?用于管理应用里面所有的组件。
08:42
就有这么一种感觉,同学,最上方的我给你画一下图,是谁呢?是VMVM呀,非常省心,VM呀,只管理一个组件,这组件叫什么名呢?叫APP组件,然后APP下属同学管理着你那些什么,哎,这个school啊啊CH是吧,School或者是哎管理着你刚才写的那个什么student呀,明白不?各位就是简单点说,形象点说,在众多组件中,哎,选择一个什么呢?最帅气的这么一个组件,哎,去领导大家,然后这个最帅气的人呢,是属于一人之下,然后万人之上是吧?啥意思?就是VM之下,然后所有组件之上,明白不?APP就是这么一个存在,哎,那所以说来吧各位,咱写写吧,创建一个组件,名字叫啥APP,那写好注释吧,走,叫做创建,或者叫定义,咱们之前一直不都叫定义吗?定义APP组件好了,Cost走你APP等于然后是view点。
09:42
来同学里边写什么,不管里边写什么啊,里边一定得写这个东西叫做components,咱们刚说完这APP咋的是不是管理着所有的组件,所以说各位这school是不是得拿回来,所以说各位这hello是不是得拿回来,说老师把student也拿过来吧,不用student已经被谁给领导了呀,被这个school。
10:04
哎,体现出来这么一个层级关系,Student不要再碰了,OK student不直接跟APP对话,Student跟school对话,School在跟APP对话,OK,一层一层来写完了吧,哎,然后呢,再写一个template,啥意思?结构,那这结构怎么写呢?各位不就是把这些东西都想展示一下嘛,简单写个div,然后里边怎么办?School标签写上,Hello标签给它写上,如果你想让hello在前,诶,那你就这么写对不?各位,那你看同学APP组件觉不觉得他没有什么自己的数据啊或者什么的,他好像目前来看就是一个管理者对不对?哎,领导了众多的组件,然后同学谁又领导了他呢?哎,就是VM,所以说在这各位你写的就非常简单了,这只写一个APP是不?各位那你说在这个结构里边就简单了呀,我不用这么写了。是吧?APP组件标签回头看一下效果,各位瞧这谁VM,那这是谁?哎,管理着所有组件的组件谁呢?APP那下属有hello,还有谁school school里边还有student对不?各位,哎,体会体会,好,回到这儿,那同学你说这里边吧,我还得写APP,你说如果容器里边我连APP我都不想写呢,那怎么办呀,同学,容器里边是可以不写东西的,咱之前学过呀,那你是不是得这么做呀?在这个VM里边,你是不是可以配置一个template,那这个templ怎么写呀?来吧各位,走APP,走,你然后告诉APP是这意思不?嗯,琢磨琢磨各位,这是谁啊,这是VMVM里边写的,他们里的最终往哪塞呢?是不是塞到这个位置啊?是这意思不?哎,所以说你这么写,各位,那你看跟刚才不是一样的效果吗?你撤回来,你看你刚才怎么写的,同学刚才不是在这儿亲手写的这个吗?那你不想在这写,那再撤回来,走,那就在这儿写呗,各位这么写的。
11:59
优势是什么呢?是吧,你看一下就是容器里边干干净净,哎,我完全靠这些代码呢,往里边放,嗯,回来看效果刷新,你看是一样的,说老师啊,你这是不是为了讲课故意套这么多层啊,不是我为了讲课故意这么套,不是我为了讲课故意给你整出来一个APP是标准化开发是要这样写的,OK,哎,所以说同学体会体会组件的嵌套,再体会体会这个APP是不是,哎,一人之下万人之上,OK这一小节。
我来说两句