00:00
哈喽,各位小伙伴们,那咱们呢,接着继续了。接下来啊,咱们要讲一下子组建实例,自身的到了at ts与到了listeners这两个属性。那首先说啊,看一下咱们当前的这样的一个案例。咱们呢,要自定义带how提示的按钮。那首先说啊,这里面咱们会用到饿了么UI当中的一个小组件叫EL8。因为在咱们的后台管理系统项目当中,饿了么UI使用的频率非常高的。那么对于咱们现阶段而言啊,可能饿了么UI用的不是很熟悉,但是没关系,咱们慢慢来。那首先说啊,咱们先找到对应的要讲这个知识点的这个组件,这不这呢吗。将a t RS listener test。那咱们看它的一个结构。首先说啊,这个结构非常简单,有一个跟标签,以及有一个HR标题。
01:07
那HR标题不就是这里显示的这段文字吗?自定义带how提示的按钮,这不就是这个标签吗?那咱们呢,要聊的是自定义带how提示的按钮。那咱们呢,先稍微复习一下子饿了么UI当中的一个小的一个组件叫EL button。那这里老师说一下子。呃,希望在进入后台管理系统项目之前,把这个插件给它安上,叫V-helper。因为这个插件可以对于饿了么UI当中的组件进行提示,对吧。好了,那咱们看一下子,那比如说啊,咱给他来个文字叫做添加,那咱们看一下子,这不就是咱当年所学的饿了么UI当中的这个EL组件。对吧,那咱们呢,对于EL-button这个组件,你得知道它除了有type这个属性之外,还有很多。
02:09
比如说你看咱们看一下,它可以添加icon图标。Icon是图标的意思。它的属性值呢,必须以EL-I开头。比如说咱们来个添加,添加叫做plus啊,其实这个icon的属性的使用值有很多。等咱们进入到后台项目的时候,你会发现,诶,这个不用去死记硬背,对吧,但是你得至少得知道一件事,Icon图标它一定是以EL-icon开头的,而plus是加的意思。那咱们呢,可以看一下子,那你看现在是不是就带有这样的一个小图标加号。对吧,那当然饿了么UI当中的这个EL button,你可以改变它的大小尺寸,通过哪个属性呢?通过size。对吧,比如说让它小一点,那就是mini对吧?哎,那咱们可以看一下,你看是不是个头就小了很多。
03:04
对吧,好,那这个呢,是对于咱们前面所接触到的一个EL8这样的一个小组件,就是饿了么UI提供的啊,这样的一个小组件的一个基本的一个使用。那首先说咱们并不是说想玩一下这个一摇八就完事了。咱们想做一件事,什么事,就是封装一个组件啊,说白了就是把这个EL杠八进行二次封装。而且封装咱们自己封装这个组件呢,还得怎么的,还得带提示,什么叫提示,就是你鼠标一放上去。啊,就小手指头一放就有提示。对吧,那所以说来咱们呢,给他来一个文件夹。这个文件夹咱们给它起个名字吧,叫做hint button hint这个单词是什么意思呢?是提示的意思啊,提示。那咱们呢,进行饿了么UI button button的二次封装,咱来一个呗,那这个起个名字就叫做inex。
04:08
对吧,那咱们呢,来个模板V1。那有的同学可能会说,那老师啊,那EL杠八的二次封装,这不就简单吗?你把它咋的,你把它一带走。你给它一放在这儿,那不就完事了吗?但是你要注意啊,你要这样进行二次封装,你跟没封装没啥区别。对吧,如果你这么封装,你封装这个hi button这个组件,它只能显示的是啊添加。对不,而且只能图标只能谁只能是这个这个加号,你得让他动态。对吧,那当然咱们先回到这先,呃,引入咱们刚刚封装好的这个,呃,Button。Import。名字叫做hint button。For wrong从谁呀?是不是咱们点杠hi button,当然这是引入,你还得咋的,是不是还得注册comps hi button。
05:06
对吧,那当然咱们需要怎么的,是不是使用一下子就是hi button,当然你现在这么写,你跟写一个EL-button是不是没什么区别呀。对吧,那咱们可以看一下,这不就是刚刚咱们所写那个EL。对吧,那什么叫做封装,也就说将来比如说我给他一个icon,比如叫delete,那你这玩意是不是得去删。对不对,你给他一个烧瓶,那是不是一个购物车。对吧,你这得变成动态的。这能导红包,那也就是说你这里的这些数据你不能写死了,将来都是咋的,都是动态的。这样懂吧,那添加咱们不要了,对吧,你得是动态,你不动态的不行啊。那如果是动态的,你可以怎么办?很简单,就是当用户闲下。当用户在使用我们啊,使用我们封装的按钮的时候。
06:07
那你需要像像谁像啊,就类似。哎,就是像吧,哎,像咱们的hint button组件。是不是传递相应的参数。对吧,其实咱们现在的这个组件,其实说白了就是对于EL-button。进行了什么,是不是进行了二次的封装?对不,那实质你用的还是一杠八的。对吧,那你需要给人家传递相应的参数啊,比如说类型是什么类型的,对吧?Type,那咱给他来一个呗,Type,那这在干什么。老师问你,咱现在这种写法在干什么?是不是在父组件给子组件传prop?成,比如type为什么为个sizes是不是成功?对不,比如说还有什么,还有icon icon为什么你一定是以EL-icon开头的,比如说咱给他来个什么,来个叫delete,那是不是山。
07:07
对不以及大小个头size为啥为mini?当然咱们将来想要做的这个这个二次封装这个按钮还想带一个功能,什么功能,就是你鼠标一放上去,它是有提示功能。而咱们现在是没有的。那所以说咱们可以再给他传一个prop,比如说叫做title,为什么,比如咱起个名字叫做提示按钮。那当然,现在你鼠标放上去,它是没有任何提示效果,以及像咱们的这个应该展示delete这样的一个butter,它也没有,因为你现在只是副组件通过purpose给他传了,但你没有接受。那有的同学回到这儿说,老师那不就简单了吗?那你回到这子组件不就可以利用prop接收吗?可以,完全可以。但是咱们这里边呢,就不再用prop了,咱们说一个新的知识点,就是谁到了ATS。
08:07
它是什么呢?它是组建实力自身的一个属性,你看咱们可以打印一下。哎,咱们可以看一下。早。conso.log叫face.dollar at t RS,它是属于组建实力自身的一个属性。那它可以获取到什么呢?那咱们呢,可以通过控制台去看见,因为眼睛见到的才是真的。那你会发现一件事,什么事你自己看。因为说到ETS,它可以干什么,先下吧,首先说Dollar。At t RS,它是属于组件。自身啊,就是属于组件的一个啥呀,属性它可以干什么,是不是可以获取到副组件。
09:01
传递过来的啊,过来的是prop的数。对吧,因为咱们以前接收副组件给的数据是不是通过prop想想。咱们以前接收副组件给的数据是不是prop接收,但是从今天开始之后,你得知道组件的ATRS属性,也可以接收副组件给咱们传过来这个process。OK吧,这个一定一定要注意,你看这是123是不是这四个。对吧,那当然说有的同学老师,那我就用prop接收呢,那咱们再看看这种现象,Prop,比如说老师接收一个title,因为总共他传了四个。那你再看一下。你会发现一个新的一个效果。那你会发现在咱们的到了a tr属性当中没有了抬头。那也就是说咱们得知道一件事,什么事。就是对于。哎,对于子组件。而言。
10:01
那么父组件。给的数据可以利用接收。但是你要注意,但是需要注意,那如果子组间通过prop。哎,接收的,呃属性。那么在到了at t当中,At ts属性当中。是咋的,是获取不到。对不?那你看老师不写prop,你自己看是不是四个title是不是也能获取的。对吧,那如果说你把prop给它打开,那你会发现,诶开头是不是没了。对吧,那咱们先完成第一件事儿,就是让咱们自定义二次封装这个组件,带提示的那个小效果,你可以怎么办,你可以这么办,在EL button的外边,你给他放个A标签。
11:00
因为A标签是有一个开头属性,它不就是带那个提示的小功能啊。对不对,那所以说这块你可以怎么办,可以这么办,冒号开头。为什么?因为你看咱prop是不是已经接收副组件给这个title啊,那你就可以写啊,写谁写title。那咱们可以看一下子,咱们现在的这个组件是不是带有提示功能。对不对,对吧,所以说咱们可以巧妙的利用谁写一下子可以巧妙的利用A标签。实现哎,实现咱们这个按钮带有什么,带有提示功能。哎,功能。但是你要注意咱的EL button身上,你是不是得有那些属性,比如说tap呀,Size icon说老师那这块不简单。对吧,你比如说你来一个叫什么叫type。Tab它应该为什么?它是不是应该为,那应该是动态应该为组件实力Dollar at t rs.tab属性没问题。
12:06
咱们可以看一下,这是没问题的。但是你要想明白一件事,什么事儿,如果这个EL8身上,那假如说有1000个属性,你是不是得写1000遍。咱不用多说,有十个你是不是得写十遍,所以你没必要一个一个写,你可以怎么办,可以这么办,就是谁V港办。V-B的,V-B的是谁的权限是不是这个冒号绑定,哎,动态属性V-B。为什么为Dollar at t RS,那这样可以把所有接收到的这些数据都可以作为这个EL button身上的属性。对吧,就可以不用一个一个去写了,但是这里面一定要注意,哎,就是下面的这种写法,哎,下面的这种写法你不能用谁用冒号。说老师V杠半的不就是冒号的全写吗?那我用冒号写行不行,不行,你必须得用谁,你必须得用V杠半,这里一定要注意。
13:09
对吧,那你看这样不就美滋滋吗。刷新看一下对不对,对吧?哎,那以及比如说老师想给这个按钮再绑定一个,单击时点一点击弹出点东西。那你看,那也就是说我想给这个hi button绑定一个事件,点击事件一点击弹出一个,比如说666。那有的同学可能会想到老师,那这不简单吗?爱谁Li?但是你要注意现在在这块所写的艾,它是什么?Click。对吧,比如说底下这里,哎底下哎这里哎这里它代表的是啥,是自定义事件。OK吗?它不是原生的,呃,那个原生的可立事件,而是自定义事件,那有的同学老师写一个点native行不行,行,但是咱不想写native。
14:05
但是你要注意这种写法是什么,代表的是不是自定义时间handler。那当然咱们这你得写相应的回调对吧,哎,点击。点击事件的回调。当然你这是不是得有handle了,一点击弹出666,那咱就来个ALERT666,那当然你现在点它指定不会弹。他也不会触发这个点击事件,因为你根本没有触发这个自定义事件。你这怎么?对吧,那有同学说啊,其实你回来回到这儿你看一下,其实说白了食指是不是给EL杠八绑定单击时间。对不对啊,那这里面老师呢,也不绕弯子,咱们说一下子看这。咱们可以通过谁呢?可以通过他。通过组建实力身上的这个属性叫到谁呀,叫listeners。
15:00
它可以获取到父组件给子组件传递的事件。你看吧。这不,点击事件是不是也可以获取的?对吧,所以这块一定要注意,咱们写一下子叫Dollar listeners。加。它是什么?它也是组建实力自身的一个属性。它呢可以获取到副组件。给子组件,哎,传递的自定义事件。OK吧,啊,那这块要注意,那咱能拿到时间你要干什么?你是不是要给EL button绑定个单机时间?DK怎么写?可以这么写,We go on。那咱们应该知道,艾的全称不就是V-on,为什么为咱们的Dollar listeners就是他。对不,那咱们可以看一下,当你一点击的时候,会不会弹出666,是不是可以。
16:01
对吧,所以说咱们呢,得做一下笔记。这件事你得知道啊,咱们写一下笔记,这是第四个。哎,第四个。就是到了listeners与Dollar。At t RS写一下。它们两者呀,来写一下它们两者是组建实力的属性。可以。获取到副组件。给子组件。哎,不是字符串,是获取到父组件给子组件。子。组件,哎,传递的prop与自定义事件。那不就是组建通信方式的一种吗?对吧,哎,方式的一种,所以说这里需要注意一下。OK吧,而且这块呢,也要注意下面这种写法,V杠二。
17:02
哎,不能。用艾符进行替换。艾特,艾特符号。进行替换。咱们可以试一下子,如果说你这块换成谁,换成I是不行的,必须是以V杠二开头。刷新看一下。对吧,所以说这里呢,一定要注意一下,给它换成韦达。
我来说两句