00:00
好嘞,各位自定义事件呢,学完了,那咱们就得练一练,接下来呢,我把src里的东西啊全都给它删掉,把咱之前讲的这个todo list呀给它拿过来,接下来呢,我就把todo list这个里面涉及到子给复传东西的地方都给它改成自定义事件,好,我们回顾一下各位啊,这里边哪些地方我们用到了子给父传东西来控制台呢?打开首先各位我先添加一个啊,比如说叫做吃饭,那同学你想啊,整个红色的是不是APP呀?啊,那这有一个hier是APP的子组件,下边呢,还有一个foot特哎,也是APP的子组件,对吧?各位,哎,舒老师你咋不改改这个呢?中间这不有这list吗?不也是APP的子组件吗?但是你要知道啊,各位,这个list里面还有子组件呢,那涉及到什么呢?涉及到APP和他孙子之间的事儿,对不在这儿我们先不探讨啊,中间list这块啊也得改,你得我们。
01:00
完什么再改呢?讲完那个事件总线再改啊,咱现在只关注子和父之间的事儿,那也就是说在这儿添加一个todo的时候,还有底部呢,进行什么全选呀,什么清除已完成的时候,不都是子在给父传递数据吗?来,咱改改啊,各位回到代码当中啊,找到hier组件,Hier组件之前呢,得收到东西,诶,换个颜色是不是在这儿呢?收到东西艾特todo,然后呢?啊,都处理完了,还得调这个东西,这回不用了,来各位找到my head组件的父亲是不是在这儿呢?不用再给他传这个at todo了,我只需要这么改一下就可以了,你看着啊,各位改成at福就改完了,我这个意思是给my header这个组件添加了一个自定义事件,事件的名字叫做at todo,那么这个事件的回调呢,也叫矮的todo,他俩可以重名啊,各位他俩没什么冲突啊,这边是事件名,这边是回调名,那我有没有有没有这个爱。
02:00
Todo呢,有啊,你往下看嘛,这不在这儿呢吗?你只要把数据给我,东西我会放进去的,之前写好了对吧?各位,OK,这就写完了,那来到这个my hier里面,各位,那你觉得你还需要再接收吗?当然不用了,那既然不接收了,等你想添加的时候,你怎么办呀,你就不能调这个呀,那得怎么写呢?当然是用这个inmate啊,然后处罚一个事件,什么事件呢,党的什么事件就触发什么事件呗,啊那处罚事件的时候的数据呢,当然是这个todo OB BJ呀,OK,各位,这功能就改完了啊,不用在这用props接收了,来我们看一下效果,能不能正常添加啊,比如说再来一个叫做学习好回车,各位是不是也能添加,而且呢,这里边有一个细节上的问题啊,各位你呢,可以借助V忧的开发者工具啊,去看那些自定义事件,你比如说我给你打开各位,我们之前啊一直关注这个选项卡,对吧,各位其实呢,还有一个能用谁呢在这。
03:00
啊,把鼠标放在这儿,你看它有什么提示啊,各位说Switch to events什么意思呢?请你切换到事件视图来,这样我全选,然后给它清除掉,然后呢,我切到这个里边,你瞧着啊,各位现在没有事件呢?啊,那接下来我添加一个是不是就触发了自定义事件呢?之前我们为什么没用这选项卡呀,之前咱没写过自定义事件吗?对吧?各位来一个吃饭推车,你看同学是不是有艾特todo首先在这儿呢,给你展示的是这个自定义事件的名字,你再往下看是本次事件的详细信息,那这是什么呢?事件名,那这是什么意思呢?用1MIT出发的,对吧?Dollar福1MATE,那么这个source是什么意思呢?就是哪个组件榜的事件,哪个组件触发的事件告诉你的,多明白呀,My header,那么下边的这个playload是什么意思呢?各位其实就是参数啊,他都给你汇总好了,给你用一个数组的形式给你呈现,那你传的第一个参数当然是一个object类型的。
04:00
Todo o BJ对不?各位哎,那如果说老师我还想传别的可以啊,你找到这,你再传一个123保存,这个时候呢,你再添加一个啊来给这会儿呢,给它清空掉,再来一下,比如说睡觉回车,各位你看playload里就不是只有一个了,还有123是不是都给你展示了呀?哎,好,我们接着改各位,还有一个地方啊,也能改成这个自定义事件,只要涉及到父给子传东西的地方都可以改,你比如说foot,但是同学你要注意了,这个东西不能改。为什么呢?因为todos是数据啊,各位你觉不觉得你给福特传递todos那个数组是为了让它能计算呢?是不?各位你这传递的可不是函数啊,Todos可不是函数,是一堆要做的事的数组啊,那你看这个同学传的是不是函数?是的,那这个是不是函数?是的,那所有父给子传函数的地方,你说你的潜台词是什么呀?父为啥给子一个函数啊,潜台词是什么?是想让子把数据给他弄回来对不对啊,说的再直白点,父亲给儿子一个函数,那是想让儿子调用的,儿子为啥调用啊?儿子想把数据给他父亲对不?那所以说这各位改成艾特福,那这儿呢也改成艾福,其实各位只要你之前的工作呀,你做的到位,这个checkout todo,还有这clearout todo,只要你写的好,同学在这你不用有什么大的改变,对不好了,保存回到哪呢?F当中所有接收的这些东西,哎,同学你别整个都删掉,整个删掉。
05:34
给了没有to肚S了对不对?这两个方法咋的不用再接收了啊,那同学涉及到要全选的地方,那我怎么办呀?找一下是不是这涉及到全选,别这么写了,复制一行走,这怎么写呢?用那个Dollar符是不是1MATE,嗯,Dollar符1MATE,然后呢,Value肯定得带,那么那个事件的名字好像叫check or todo是不?各位那再往下找呗,涉及到这个清除所有已完成的地方,来到这儿再找是不是在这呢?那这行呢,住调再来一行,那这怎么写呢?来给它解开,这叫做emmit Dollar福emmit,然后呢,是不是这个事件的名字啊,叫clear凹凸do啊传值吗?不传OK,这不就行了吗?来看一下功能啊,整体刷新一下,看一下控制台啊,吃饭睡觉再来一个,比如说呢,叫做学习回车,看一下这个工具啊,走各位,这是不是有一个at todo啊,那我想全选来走你看checkout todo是不是都在这呢?那我想清楚已完成,走你各位。
06:34
Or todo是不是都在这儿呢?你看看自定义事件对吧?各位OK,那就把这个todo list呢,给它改成了一个这个自定义事件的版本,那我就把这个再复制一份给它改个名字对吧,叫做11,哎,下划线src下划线叫做todo list,小写的I啊,List,然后呢,我就不写那个案例了,再来一个下划线叫做自定义什么呢事件,我们接下来要做的事就是不断学习新的知识,各种组件之间用各种方式进行通信,然后就把咱这个todo list改着改着改着就改的非常完美了啊好,这一小节呢,停。
我来说两句