00:00
好嘞,各位,那从这小节开始呢,咱们来学习一个重要的知识,叫做组件的自定义事件,那什么是自定义事件呢?其实它呀就是区别于GS里边内置事件而存在的,你比如说我给大家写两个啊,点击事件click,还有键盘事件key up,当然还有很多什么most live,什么Mo inter,同学我问你这些东西是不是都属于GS里边本身就有的事件呀,我们直接用就可以,是不?诶我们管这些东西叫内置事件,拿过来就用,那我们这小节要学的就是自己去打造一个全新的事件,你比如说你打造一个艾特硅谷事件啊,或者说你打造一个佩奇事件,对不?哎,这些东西同学叫做自定义的,但这里边有一个值得你注意的点啊,就是这些内置事件同学是给谁用的呢?是给这个HTML元素用的,你比如说我给H1啊这个元。
01:00
绑定一个click事件,或者说呢,你给这个input这个元素绑定一个key up事件,对吧?内置的是给atl元素用的,但我们这小节讲的这个自定义事件是给谁用的呢?你可要注意了,各位是给组件用的,哎,体会体会,所以说你看我们这一小节的视频都叫做组件的自定义事件,OK啊,咱代码上见各位,我把上一小节写的todo list子啊,这个全都给它删掉啊,干干净净的咱们去讲这个自定义时间,然后我把六这里边的都给它粘过来,我不再一点一点敲了,各位浪费时间,为什么拿六呢?因为六里边写的东西简单,六里边我们不就是讲一个scope的样式嘛,对吧?给它粘过来好调整一下啊,各位school组件呢,这个样式给它删掉,我只留下一个样式,就是最外侧的这个,哎,写个school,给它改个名,完了呢,这也得改,里边这些东西就不动了,或者说我把它精简点,再打开student。
02:00
这个不要了,这个也不要了,那这两个就都可以删掉了,最外侧这个也留着换名student,那下边这呢也得调整这三行不要了,OK,两个组件准备完毕,随后APP里边是不得用了,引入了注册了,标签也写了,这会儿调整一下样式,不要了,这个你好啊呀,让它是一个动态数据吧,我不往下删它啊,因为一会儿呢,借助这个东西啊,我们能说明白一个问题啊好,那在这呢,就得配置好这个数据对不对?嗯,Data叫做message啊,你好啊,来个感叹号,OK,那给他的最外侧呢,也加一个样式啊,便于一会儿观察APP,那在这儿呢,调整一下APP,然后在这呢写一个背景色,给个什么色呢?一个灰色吧,各位,OK,写完了,APP也准备好了啊,那再看一下咪也没有用上什么插件啊,或者什么这个混入什么的,对吧?哎,干干净净的来看一下效果啊,打开啊就是这么一个效果。
03:00
有背景色,然后呢,我再微调一下啊各位,因为这个文字啊,和盒子之间的距离太近了,我微调一下啊,我找到school组件给它加一个这个啊,PA5PX,然后给这个student呢,也给它加一个PA,是5PX,但是这样的话离得就又近了,我来一个margin top吧啊让它往下窜一下,比如说30PX,然后APP里呢,我也给一个盘定,哎,就是能看起来更好一点啊来回到这儿刷新一波,诶就这意思,嗯,那来吧,各位打开控制台往这边调一下刷新,接下来我给你提出需求了啊各位,就是school组件蓝色的那个啊,蓝色的是school school组件在这个位置啊,有一个按钮,这个按钮有什么功能呢?就是你一点击这个按钮,就把学校名上硅谷这三个字儿啊,就交给了,哎,体会体会交给自己的组件APP了啊,Student是子组件,School也是子组件,对吧,各位其实啊各位我。
04:00
现在实现的不就是子组件给父组件传递数据吗?对不对?School给APP传点数据,传的是什么学校名,那同学咱又不是没学过子给父传点东西,我们学过用谁呢?是不是用props可以啊,但是props呢得有一个前提,就是父得提前给子一个函数,完了子呢,在合适的时候调那函数是不是就得了?来咱写写打开APP啊,样式这些啊,我就折叠起来了,这个呢也隐藏,那我是不是得写一个MYS啊,起个名字吧,比如说我叫这名get,诶在这啊,Get school name得到学校的名字吗?啊,用行餐name接收一下啊,然后这里边呢,简单来个conslo,就是APP收到了学校名冒号,再输出这个内幕,OK,来吧,把它给谁?给这个school给完了之后,那你说school是不是得声明接收啊,啊,划到这儿走。
05:00
Prop好,那接收完了之后呢,写那按钮呗,走button叫做把这个学校名给谁呢?APP给一个点击事件click,名字起得好一点啊各位,因为一会儿呢,会涉及到很多名字,每一个名字我都起的很细节啊,这个呢叫做send,是不是有发送的意思,哎,Send什么呢?啊,我就不写那个to了啊,那就太墨迹了,大家都知道是给APP的send school name,那你说在这儿我是不是得配置一个methods啊,这折叠起来啊,走methods好,里边呢。啊,写名呗,走那里边呢,诶收到这个那就调嘛,走this.get school name对不?各位,哎,然后呢,传传谁是不是传自己的名字呀,this.name是不是就可以了,各位来看一下效果啊,这些东西大家应该无压力的啊,放大一点来走不过来了啊那接下来你听我说各位,同样的功能我想给他一份,就是在这儿也有一个按钮,哎,叫做把学生名给谁呢?给APP也是给自己的父亲,但是在这儿我们换一种方式,用什么去写呢?自定义事件去写,来各位我先写着啊把这school呢就给它关掉了,咱用完了啊演示一下,回顾一下这个pros是不来给注释呢?也给大家写上,叫做通过父组件给子组件传递函数类型的props,然后实现,实现什么呢?叫做子给父传递数据是。
06:40
这意思不?各位,哎,你给他不是get school name吗?那get school name不就是一个函数类型的pro是不?各位好,接下来student这你瞪大眼睛了,我要这么写了,我先写一段代码,然后咱们把这段代码给它分析明白了,我这么写啊,V杠杠同学,这指令熟悉不,是不是在绑定事件呢?哎,冒号后边跟上什么呀,事件名字,那接下来我不写click,我不写k up,我写什么呢?艾硅谷,哎同学,一个新的事件出现了对不对?哎,等于走,我写1DEMO,什么意思?各位读一读,首先啊,我们必须得认可一件事,就是V-on在谁身上,那就是给谁在绑定事件,对不对?那我问各位V-on在谁身上啊?
07:27
啊,说老师魏刚在这个student身上啊,然后就有同学说了,哎,老师那明白了,就是给这个student组件呢绑定了一个事件,同学这么说没啥毛病,就是不太细节,细节你得这么说,由于V-on在student这个组件标签上,所以说是给student这个组建的实例对象VC身上绑定了一个事件,事件名字叫什么呢?叫艾特硅谷,如果以后有人触发了这个事件,那么DEMO函数就会被调用。同学这么说大家能不能明白?哎,这说的就很细节啊,我知道你说老师给student组件绑定了一个事件,叫艾特硅谷,这么说我知道没问题,但是咱们在学基础嘛,较真一下,叫做给student组件的实例对象VC绑定了一个艾特硅谷这个事件,对不?各位,我们之前就聊过这个问题,同学,你写了一个组件标签,那view底层要帮你办事的,他得。
08:27
帮你拗这个人叫做view,还记得吗?是吧?他得帮你拗view component,那你这一出来可不是一个组建实力对象吗?那可不就是VC嘛。好了,这不墨迹了各位啊,但现在写的有点毛病,什么毛病呢?你有这DEMO吗?哎呀,我没有,没有怎么办呀,配置一个呗,来,在这儿写上DEMOOKDEMO只要被调用了,各位我就consolo DEMO被调用了可以吧?各位啊,那接下来各位当务之急就是赶紧处发一下这个艾特硅谷事件对不对?各位,哎,然后同学啊,就迷惑了,哎呀,老师,你这得咋处发呢?那你说可立刻事件我点就行了,那这个kk up事件是吧,我键盘摁下去,我抬起来就行了。哎,老师,你这艾特硅谷事件这玩意儿得咋处发呢?然后有同学就开玩笑了,哎,说老师明白了,我呀,得抱着电脑去你们上硅谷那学校,哎,我一进你们教室,这个事件就被处罚了,哎,不是这个意思。
09:27
啊,不能这样去处罚,说说怎么处罚啊各位这里边有一个原则,我仔细跟你说啊,你听一下这个原则,原则就是你给谁绑的事件,你就找谁触发事件去,其实同学这个很好理解,我问你页面上有两个按钮啊,一个是红色的,一个是绿色的,完了呢,你给这个红色的按钮啊,绑定了一个click事件啊,只要你一点击它,各位它就帮你调一个函数,比如说调什么呢?调这个DEMO函数,那我问各位啊,我这欧美画下,我给你补在这儿DEMO,那同学我问你现在你想处发立,你就告诉我你得点谁,你点红的还是绿的,那肯定是红的嘛,对吧?啊,你给红的绑的Li,那你想处罚,可Li那当然是点红的呀,对吧,各位,那我问你,你给谁绑的艾特硅谷事件给谁说仔细喽,给谁给student组建的实例对象?你说对吗?那你现在想不想处罚他?想想处罚怎么办?
10:22
找谁去?哎,你就去找student这个组建的实例对象是不各位,哎,那所以说很自然啊,你得来到哪儿,是不是student,诶打开说老师,那接下来怎么写呢?来,甭管怎么处发事件那按钮我问各位你是不是得给人准备好了对吧?哎,刚才那按钮叫什么,叫做点我什么把学校名,那这同学就这一堆咱都复制过来,省着再写了,把这儿呢给它粘过来,这叫啥把学声明对吧?那这别叫send school name呀,叫做send什么呢?哎,Student呗,好了,复制慢慢来,那在这儿怎么办呀,是不是得配置一个mys OK叫send student name走着,那接下来各位在光标闪烁的位置,我就想去触发那个艾硅谷事件,是不本着刚才的原则,我给student这个组建的实例对象那个VC绑定了艾特硅谷。那你回头想处。
11:23
浦发这事件,你就只能找谁去student的组建实力对象谁VC,那同学在这儿我可以轻而易举的拿到这个组建的实例对象VC,我用一个关键词就可以谁this,问题是接下来我得怎么处罚是吧,你不能点,你不能按键盘,那得怎么处罚呀?来同学借助一个特殊的方法,这个方法的名字呢,叫做Dollar符MIT这个emmit啊同学,其实它没有处罚的意思,它的本意呢,查了一下是什么呢?是爆发啊,就什么发射那个意思,什么火箭发射,那在这儿呢,同学我们就理解什么呢?哎,就把它想象成触发就可以了,他没触发那含义啊,但人这API设计的就叫这名字,哎,各位,它是个函数,你调用,哎,然后说你想触发哪个事件,哎,告诉人家是艾特硅谷,千万别写错呀,同学,你要写错就毁了,人家这边绑的事件是艾特硅谷,好家伙,你这边写错了,那肯定是不行的,哎,说老师这就能触发了,是的。
12:23
来写好注释,叫做触发处发谁student组建实例身上的艾硅谷事件,哎,别嫌墨迹,咱在这儿呢,把事儿说明白了,好回头看效果啊各位刷新一波啊,这儿肯定是没问题,能收到什么上硅谷来看这儿各位,哎,走哎,看DEMO是不是被调用了,我知道你可能说,诶老师这学生名没传过来呢,一会儿再说,同学先体会一下这种感觉,来从这儿再捋一遍啊,给他的实例对象绑定了一个艾特硅谷事件,只要事件被处罚,诶这个DEMO就会被调用,那怎么处罚呢?啊,给谁绑的找谁处罚啊,给他绑呢?啊,那找他处罚怎么处罚呢?1MIT就处罚了呗,但是没有数据,你说对吧?各位,很简单啊,后边再多写一个参数,数据不就来了吗?This点谁呢?内幕,我把谁的名字给过去了学生的吗?那所以说各位回到APP里边,那你说这会儿能不能收到参数啊能。
13:23
谁呢?Name谁的名字呢?学生的名字,那在这儿同学来一个逗号,这是不是就可以了呀,那别叫这名了呗,为啥非得叫DEMO啊,叫什么呢?叫这个get student对吧?好,那这呢,APP收到了,不是学校名是什么呢?学生名哎,体会体会,那你这儿改了,各位你这儿是不是也得改啊?哎好了,回头看一下效果啊,刷新一波这块肯定是没毛病的,那看这儿呢,走哎同学实现了吧,哎,咱们捋一遍各位啊,现在呢,无论是蓝色的给APP还是说呢,这个粉色的给APP,其实都属于谁给谁子给父传东西对不?那咱们对比一下这两种方式有什么区别和联系啊在这儿呢,我把注释啊也给大家写上复制这什么呢?通过父组件给子组件,诶不是这个了,叫做绑定一个自定义事件,然后呢。
14:23
实现实现什么呢?子给父传递数据,说老师他俩的区别和联系,来说说吧,它俩的共同点啊,是在这儿,就是我不管你是通过pros还是通过自定义事件,你必须都得在这儿啊,给我配置好两个回调,你说对不?这个方式就是属于你写了一个get school name,然后呢,你非常大公无私的就把这个东西给谁了,给你的school组件了,完了school组件里边怎么办?亲自去调用,同学你看看来打开school是不是亲自得收一下,是不得亲自调一下,哎,这就是这种套路,那还有一种套路就是在这儿各位你看啊,我也写了一个get student name,但是同学你可看好了,我并没有把这个get student name交给我的student组件,我什么也没给他传,各位,我只是给他绑定了一个自定义事件,我是把这个东西作为事件的回调在使用,诶有没有这么一种感觉。
15:23
舒老师,你真的什么也没给他传吗?当然各位,如果我要给他传东西了,我问你这是不是得写一个这东西去收啊,但是你写了吗?没写,你看看对比对比,Student里面没有用pro声明接收什么东西,但是school里边那可是实实在在接收了,对不啊说老师那东西怎么过来的呢?是因为student里面,诶你触发这事件了呀,对不?各位哎,所以说你看对比一下就会发现啊,如果你用自定义事件呢,好像能简单一点,为啥说呢?你在这不用再琢磨,哎呀,Prop里收,收完再用是不在这你只要把这个事件名你别写错就OK了是不?各位,哎,看看对比一下,其实呢,同学绑定事件呀,还有一种方式可以绑定啊,说老师明白用这种方式就是V-on啊,别写,用艾符同学,这不就是一个简写形式吗?你这么写当然是可以的啊,来,你刷新一下,看来走是不行啊。哎,我说的不是这种方式,是另外一种方式。
16:23
什么方式呢?来各位啊,我给你敲几个回车,省得你乱啊,这行注点不用这种方式了,那用哪种方式呢?瞧着啊各位走,拿到它不写这艾特符了,用谁呢?我们学过的一个东西叫ref,哎,这啥意思呀,各位,我写到这儿了,你必须马上就给我一个反馈,哎,说老师我明白你这么一写呀,意思就是以后我在这个APP组件里面,我通过APP的VC对吧,APP组建的实例对象,然后点Dollar符refs.student我就可以获取到谁student这个组件的实例对象。
17:06
是吧,各位,你像绿色框这么写,然后像红色框这么拿,你就能拿到这个组件的实例对象对不?那拿到之后呢,很简单呀,各位来在这儿的套路是这样的,你把data折叠,你再把methods折叠,同学,我写一钩子叫做mount,这熟悉吧,啥意思呀,就是挂载完毕,谁挂载完毕啊,Wanted写在哪个组件里面,那就是哪个组件挂载完毕,谁挂载完毕?PAPAPA只要挂载完毕,诶我就这么写this.s拿拿谁呢?就拿这student同学,我就问你啊,绿色框里这一堆是不是student的组件实例对象是,那接下来呢,那就可以给他绑事件了呀,你刚才是在这写的,知道不在这标签里边,你写一个艾特服务事件完了就加在了他的组建实例对象身上,但是这回我换路子了,我亲手握到这个什么呢?组建实力对象所。
18:06
后哎调这么一个方法,同学叫做Dollar福昂盎啥意思,当什么什么时候呗,当什么时候啊,当这个艾特硅谷这个事件被处发的时候,诶那咋的,我要执行一个回调,嗯,那回调在哪呢?诶当然是用这个呀,Student name体会体会是不放在这儿,但你直接写你就错了,各位methods里边配置的方法,你想拿到同学,你是不是得通过this说老师刚才刚才不是在模板里吗?模板里边用什么东西,是不是都不用写this呀,但是在这儿是不是都得写呀?哎,你写一个同学,你可以实现同样的效果来看一下刷新走好用不好用,那我写到这儿呢,我知道肯定有一些同学说了,老师啊,你放心吧,这种方法我绝对不带用的,还得写mount的,还得写这么长,上面还得写个ref,那可真是太麻烦了,虽然它麻烦,但是我告诉你,它灵活性很强。
19:06
哎,说老师怎么就强了呢?来先把这注释啊给它补好了,各位复制写在这啊,那这个呢,写个括号吧,是吧?哎叫做第一种写法啊使用谁呢?艾特符哎或谁呢,就刚才的那个V-on对不对啊那这呢,来把这一堆呢给它复制,嗯放在这儿,这叫做第二种写法,诶这使用谁呢?Ref是吧?各位说老师我就看看它怎么就灵活性强了呀,那你瞧着呀,同学我想让APP啊这个组件挂载之后,等五秒钟或者说等三秒钟,我再给student这个组件实例绑定自定义事件,你觉不觉得用第九行你就没法写,你写不下去,因为同学你想啊,整个APP里的模板在被解析的时候,在执行到第九行的时候,各位瞬间你这个艾特硅谷这个自定义的时间就给谁绑上了,就给它的组件实例对象是不是绑上了是不,那你看你这不灵活呀,就模板。
20:06
一解析瞬间绑完了,但是我的需求是等一等对吧,等三秒,哎,或者说我等一个adjust请求发送完了回来,诶我再给你绑定自定义时间是不?各位你用这个就写不下去,那这个呢就完全可以,那你瞧着各位,我在外边儿啊,给他包一个set,太out,就这个,然后等多久呢?我让他等这个三秒钟吧,各位别等太久了,三秒钟嗯,然后在这儿呢,放进来,那同学你看这灵活性就强吧,你这么写的效果来你瞧瞧啊,各位刷新一波啊,一会儿我刷新完了呢,我马上就点这个按钮,但是大家知道你马上就点这个按钮啊,那你看这儿确实啊,你在疯狂的触发at特硅谷这个事件,但是我想问的是student这个VC身上还没有这at特硅谷呢吧,是不得等三秒钟才有啊,所以说呢,就是这么一个效果刷新来点没反应,你等三秒我一直点啊,你看就有反应了,对不?各位哎,所以说人家这种方式怎么的呢,能更灵活。
21:06
活一点,哎在这哎能更灵活一点,OK,但是如果你没有这个需求同学,那你就正常在这儿用艾符去写呗,啊OK,那我把这定时器呢,给它删掉,就给大家说这么一个意思,OK,好啊,那这里边呢,还涉及到另外一个事儿,各位就是有些时候啊,我想让我这个自定义事件呢,触发一次之后就不能再触发了,那这里怎么写呢。哎,来同学可以这样写啊,如果你通过这种方式去实现,那么请你换一个API,换哪个呢?复制一行,把这注掉,加一个这个once,那你看一下刷新,同学点了一次是吧,再点是不是就不行了?哎,那如果你用的不是这种方式呢,用的是上面那种方式呢?啊,那怎么办呀?来各位走着把这个住掉,把这个解开,那怎么办?在这打一个点on啊说老师明白了,这不就跟我们正常讲那个事件差不多吗?如果我写的是click click不也能用这个ones吗?对呀,就这意思呀,好了,保存,回头你再看一下效果,刷新一波,同学点一次行,再点是吧,哎,就没有反应了,OK,这就是自定义事件的一个最基本的使用,那这里边呢,还涉及到一个问题啊,各位,就是说当我去处罚这个事件的时候呀,我想传很多的数据过去,你比如说在这儿我还想传一个666888是吧,还想传一个900,那你看我是不是传了。
22:32
很多东西过去啊,啊,那同学你说这怎么办呀,来回到这儿,那你这要如果直接写的话,各位你只是啥,你只是name呀,你只拿到一个,那不信你瞧嘛,刷新走,你只拿到了张三,那你后边那六六六八八八九百是不是没了呀?哎,你可以继续去接,你比如说XYZ,然后在这呢,继续输出XYZ对不?各位好了,回到这刷新再走一波,你看六六六八八八九百是不是来了啊,但是一般来说同学在开发中啊,我们不在这儿写这么多的行参去接,如果人家这边传递的东西很多,各位有两种做法啊,第一种做法就是把这一堆东西包装成一个对象传进去是不是可以?各位,哎,还有一种方式呢,就是你就正常传你写一堆,然后在这儿呢,你瞧着它这么来了,怎么来呢?Name我正常接,因为我这个东西,你看这名字get student name我就想要名字嘛,那除了名字以外的其他参数怎么。
23:32
怎么办呢?那就看你ES6熟不熟了,如果你熟,你就应该知道有这么一个写法叫点点,点完了随便写一个型材的名字,比如说A同学,这么写啥意思呀?这么写的意思就是我不管你传了多少个参数,第一个参数拿出来作为内幕行参接收,剩下的那些全都给你整理到A这个数组上对不对?各位,来,在这儿我写一个A好了,保存刷新一波,点一下走,看666888是不是在这儿呢?啊,数入上的学生的姓名呢?嗯,那来回到这,你没输出啊是吧?在这儿再写一个就可以了,刷新一波来走,你看张三在这后边的都收集好了,但一般呢,不用A,用这词儿PAR,哎,什么意思呢?参数对吧?各位,OK,看一下效果啊,来走,这不就得了吗?哎,体会体会,同学,自定义事件是这么玩的啊,这一小节呢,我们只是讲一下这个自定义事件的一个基本使用,这里边呢,还有一些技巧,还有一些坑啊,我们在下一小节呢,去给大家讲,那这样各位啊,我把这ones呢给你删掉。
24:32
啊,正常写着,然后在这儿呢,这两行注释呢,我也给你补上啊,这个呢叫做绑定自定义事件,那这个呢,也叫绑定自定义事件,但是后边呢,给你来一个括号,叫做一次性就用完一次就不能再用了,OK啊,我们在讲课的时候,同学用哪种都可以,在这儿呢,我先用这种方式去写着,OK,但是你也知道这种方式也能写好,那这一小节呢,我们停。
我来说两句