00:00
好嘞,各位在这一小节呢,咱们给大家讲两个跟自定义事件相关的注意点,然后呢,再把自定义事件的知识呢给大家总结一下,首先呢,我打开这个student组件,这个里边咱写的这个功能啊有点多,我调整一下,各位你比如说这个按钮,我说把学生名啊给APP,那你找到这个sun student name在这,那我却做了两件事儿,我把这事呢住掉,也就是说我只触发这个爱硅谷事件,因为只有这个事件才是真正把学生名交给APP嘛,别的事儿我不做对不?我说这按钮是干嘛的,它就是干嘛的啊,不写的乱七八糟,回头大家练习的时候就发现,哎呀,点了这个按钮好几个都触发了,是不?这些测试的代码用过了咱就注掉啊,但是我不删,给你留下痕迹,还有一个按钮,各位就是他我说了我解绑艾特硅谷事件,那你找到这个安办的,我就真的说到做到只解绑爱特硅谷,不是所有的都解绑对不好,那目前呢,我们写到这种程度就是APP啊确实能收。
01:00
到一个学生的名字,接下来我提出一个需求,引出第一个注意点,就是APP啊,在收到这个张三之后啊,不是在控制台上打印,而是在页面上要做一个呈现,就比如说你好啊,后边要出现这个传递过来的名字张三来咱写写,你肯定得打开APP组件,那肯定在这个位置,你得用这个差值语法,对吧,我写一下叫做学生姓名是是不是用差值语法写一个name呀,但是你直接写肯定是不行的,对吧?各位他会报错的,你瞧一下效果刷新,他说名字没有定义,为什么呢?大家琢磨一下,你能在APP的这个绿色的模板当中用差值语法去使用内幕,那你是不是得给这个内幕给准备好啊,那么内幕的来源有几个呢?各位分析呗,一共就那么几个地方,第一个地方data中你亲自写好对不?第二个地方哪儿呢?外部传进来的pro接收。
02:00
其实还有一个地方,你别把它忘了,谁呢?计算属性是不?各位,由于目前这个内幕同学不是data里的,也不是props外部传进来的,也不是计算属性计算出来的,所以说我不能用啊,对吧?各位,哎,可能有一些同学说,哎,老师是props吧,是外部传过来的吧?哥们儿是APP的子组件student通过自定义事件传过来的,可不是pros啊,哥们,如果是S,你会写出这段代码了,你不想给APP传东西吗?APP你得这么写,你比如说传一个name,然后等于什么什么同学,咱哪写过这段代码了,你说对不?所以说不是pro。那么目前就尴尬了,你想在模板里用这个内幕,那同学你肯定得把内幕放到这三个地方才可以,对不,怎么办呢?首先啊,我们给一个人排除了各位,就是这个pros肯定是不可能了,对吧?没有人写出这段代码,说老师要不计算属性,那你琢磨琢磨各位,计算属性,计算属性它得是有了一个属性之后,是不是才能进行计算呢?也就是说你得有原数据,Comput是不是才能帮你计算,你没有原数据人家怎么计算嘛,我们之前就说过嘛,计算属性计算的时候所依赖的数据一定是已经存在的,你比如说data里边配置好的,诶,他计算一下,或者是prop外部接收过来的,哎,你给他计算一下,对吧?所以说这条路啊,你也别想了,那接下来我们只有一个办法,各位,就是把student这个子组件交给APP的name放哪去,哎放这里去对吧,各位,那你想放这里去,那你是不是得,哎配置一下吧,各位来。
03:41
走着在这写一个,那为了避免歧义啊,我就不再用哪个name了,我用这个student name对吧?各位,哎,那你在这读的时候,我问各位是不是就可以读它了呀,但是它是没有值的,各位,那什么时候让他有值呢?哎,那就很简单了,各位你说我这收到了这个name之后,确实得打印,但是一个更重要的事儿,是不是得这么玩啊对吧?各位,这大家能想懂是不来看一下效果啊,来刷新一波,嗯,学生姓名是,然后往这边调一下啊,接下来呢,把学生名给APP走,你是不是出现了,哎说老师这不挺简单的吗?来各位回头回来,你是用这种方式写的,对不掩饰不出来,我说的那个注意点,各位你看着啊,如果呀,你要是用这种方式写的。
04:30
用ref这种方式啊,来往下看,那你就得把这段代码给它解开,对不?各位,Ref和这个得是配合起来用的呀,你不能只写到这,你只写到这有什么用啊,对吧?各位,你得拿到这个student组件实例,然后给他绑定时间对不对啊,艾特硅谷好看一下效果啊,刷新其实也能实现,走两种方式嘛,然后你看着注意点就来了,有些同学啊,在用这种方式写的时候啊,他就觉得麻烦,说老师你看啊,我这还得写一个this.get student name,然后呢,我还得在这个method里面提前写好这个东西啊,然后在这呢,通过this点再读出来,哎呀,真麻烦,所以说有些同学啊,他想到这儿了,各位他说什么呢?说老师啊,我不写这个,我把这注掉,对吧,我为什么非得在这个里面准备好这个函数,完了在这再读出来this点多麻烦呀,老师这样我把里边的逻辑呀给它复制过来,完这个呀,我不用是不,然后我就直接把这个回。
05:30
一定要写在这儿,你体会一下各位啊,就直接写在这个东西,方式对不同学这不是一个道理吗?对不对?你品味一下,这是提前准备好,完了通过this读出来放在这儿,那我有一个更直接的办法呀,就是直接立刻马上就把这个事件的回调是不是写在这儿,嗯,说老师,那我能收到同样的东西啊,Name和这个啊,那来咱验证一下是不是这么回事呢?缩筋调一下保存,看一下效果啊,刷新来走,你同学是不是跟刚才一样啊,诶,舒老师,那就简单了,接下来我把这句话再拿过来,那不就可以了吗?嗯,OK,你看老师这不跟那个逻辑是一样的吗?来试试啊,各位来走你。
06:10
发现不行,同学,学生姓名是就证明这块它没东西,那么借助5U的开发者工具啊,咱瞧一眼各位,打开APP你发现呵student的内幕真没东西。那有同学就说了,老师啊,那你44行代码是不是没执行啊同学,可能吗?43行执行了,他俩中间没别的,他能不执行吗?执行了,那执行的问题是为什么我写在这儿就能把这个收到的名字放到这个里面去,那为什么在这写它就不行呢?各位,这是一个最大的坑,来各位,我让你见识一下这个this呀,他是谁啊?来,瞧着各位啊,来刷新一波控制台上键清空走你。意思是谁呢?说老师这我哪能看出来呀,说这我看不出来,那所有组件那都是view component的实例啊,同学打开吗?哎,同学你发现啊,他身上有内幕。
07:09
有性别,还还有一个最有代表性的number,同学,我问你就这些东西是是谁的呀?是哪个组建的,是student的吧,各位,诶你看这事儿神不神奇,各位,就是如果你再去配置这个自定义事件的时候,如果你通过这种方式,然后你要直接把回调写在这儿,你就发现这个this并不是像你想的那样,哎呀,说老师我在APP组件里面,哎,你看我规规整整的写的这个this,那肯定就是APP的组件实例对象啊,结果呢。结果是谁?结果是触发事件的那个人被你绑定事件的那个组件的实例对象,对不对?这就很令人崩溃啊,说老师这是怎么回事儿呢?那你看老师你这写的也挺好的,你之前跟我说的吗?只要是view帮我们管理的这个函数一定得写成普通函数,那老师在这怎么出现这问题了呢?跟大家说一下是这么回事儿,Viewa底层是这么设计的,他说谁触发的这个艾特硅谷事件,那么这个事件的回调当中的this呀,就是谁?那我问各位,谁触发的这个at特硅谷事件呢?谁呀,当然是student的实例对象,对不对?他触发的?所以说各位这个里边的this是student组建实例对象一点也不为奇,就应该是这样对吧?各位,那可能有一些同学说,哎,老师,那不对呀,那你刚才这么写怎么没这问题呢,就是刚才呀,你这么写把它拿过来这写this点它,然后呢,你把这个解开,那同学说老师你这么写为啥。
08:43
没问题呢,那你再分析一波呗,各位来谁调的艾特硅谷,或者说谁触发的艾特硅谷事件谁呀,Student的实例对象,那所以说这个里边的this就本应该是谁呀,Student的组建实例对象,但是你特别给力的各位咋的,你把这个get student name再一次的写到了这,那么view之前还给过你一个承诺,说如果你的这个函数写在了MYS里面,并且用的是普通函数,那我给你一个承诺,就是这个红色框get student name里的this一定是谁APP的组建实例对象,说老师那这么来看的话,他俩就冲突了呀,是有点这种感觉,那么最终以谁为主呢?是以最后的这一块儿为主了是不?各位这里边呢,其实是有两次改变的,对不?所以说你直接写在这儿同学不太可取,但并不意味着说我直接写在这就不行,你比如说啊各位我给这儿住掉,然后呢,呃,我撤回来。
09:43
还像刚才那么写啊,走放在这儿说老师这么写就一定不行呗,其实也不是,各位你把它写成箭头函数啊就可以了,走,我们先看效果啊,回来刷新一波,各位走那段代码我注掉了吗?看这儿同学来是谁,是不是APP,那你把这段代码再给它解开,各位保存回来刷新一波来你走是不是过来了,说老师这又是怎么回事呢?那你分析呗,比如说了这个函数里的this应该是谁呀?Student的组件实例对象,但是你把它写成了,诶,啥箭头函数,哎,可惜了,箭头函数没有自己的意思,那怎么办?往外找,那我问各位所谓的Y是哪儿啊?是不是mount的这个函数啊?那同学view又给了你一个承诺,之前就说过了,只要你在APP里边老老实实的写的生命周期钩子,并且写的都是什么呢?这种普通函数,那么它也保你这个里的this就是当前组建的实例对象,谁呢?APP的组建实例对象OK。所以说同学有。
10:43
两种解决方案,一种就是直接可以把回调写在这儿,但是你得写成箭头函数啊,就直接把view里边所规定的那个东西就给越过去了,他不说吗,这个里边的this必须得是student的组件实例对象,但是咋的我写成箭头函数,我看你还怎么改,没有自己的this吗?往外一找就成了。那么当然还有一种解决办法,各位就是在这儿直接这么写来把这段代码呢给它解开,然后呢,在这儿直接写这个this点啊,反正推荐大家吧,在这儿这么写,你把那东西好好的给他准备到这儿,省得再去考虑那个什么箭头函数那些问题了,OK,各位,哎,这是第一个注意点,说完了,那么第二个注意点,各位就说这么一个问题,你说给这个student呀,我们一直在绑定自定义事件,我们在讲自定义事件的第一小节就跟大家说了,哎,我说同学们啊,咱们接下来呀,可以弄出来艾特硅谷事件,可以弄出来佩奇事件,哎,我说同学们这些事件都是。
11:43
给谁用的呀?哎,都是给组件用的,那么考虑一个问题,组件除了能用你所打造的这些自定义事件,那么组件能不能用原生事件呢?你比如说能不能用click事件呢?哎,来咱试试啊各位我呢,接下来这样写在这儿啊,我写一个点击事件click,哎同学看好了,我可是给一个组件写的点击事件,只要你点击啊,我就受受什么呢?随便写一个呗,在这配置一个收展示,展示什么呢?展示这个123吧,OK,各位试试看能不能行啊,咱也不知道啊来同学为什么我给你加这颜色,我就是想说明白整个粉色框都是谁呀?Student好,刷新一波,各位我点了啊,有效果吗?没有,然后呢,你可能就说,哎老师明白了,就是组件呢,不能够绑定这个原生的这个,呃,盗墓时间能,各位能,但是你这么写不?
12:43
我跟各位讲,你这么写,你知道人家拿你这Li当啥吗?人家拿你这Li当自定义事件。啊,你可能还挺委屈,诶老师啊,我写的是原生盗墓事件的名啊同学你写也不好使,人家默认就认为你给组件所绑定的这个Li,什么佩奇艾特硅谷,人家全都认为是什么呢?自定义事件,那你想触发自定义事件,你得咋触发呀,是不是得用imit,那所以说在这来测试一下这行解开同学我再触发一个事件,谁呢叫做click啊,这回你再看效果啊,我得点啊,我得点这个send student name,也就是说我得点这个把学生名给APP,你看一下效果啊,刷新一波来走你啊走同学谈没谈了?诶你发没发现,虽然写的这个名啊,好像是一个原生的盗墓事件,但是咋的?嘿,人家就认为这东西咋的,嘿,他就是自定义事件,说老师,那我怎么能告诉他一声,说哥们儿啊,我写这cli,你别把它当成自定义事件,也就是说我不希望你这么去用,往下找,哎,我希望你怎么去用呢,就真的是点这。
13:53
粉色框就弹窗,那怎么告诉他呢,得用一个修饰符,哎,同学,这个修饰符的名字呢,叫做native native什么意思,原生的本来的对不对啊,同学你这么一写不要紧,人家在解析的时候就知道了,哎呀,这哥们写这click是什么意思呢?是原生的盗墓事件,于是乎你听我说,同学他就把这个clickli事件就交给谁了呢?就交给了student这个组件最外侧的这个元素,谁呢?就是那个大的div,这回就可以了,你瞧一下效果啊,各位刷新你看点一下走,是不是弹窗?哎,可以用这个native修饰符,其实从这啊各位我们也能体会出来它的一些设计,就是为什么当年他不让我们写两个根元素,你这么写绝对报错,对吧,整个东西都起不来,那你说这么写的话,同学,那你说当你写完了这个东西,人家把click给谁呢?给这个一份,然后再给这个一份,不是的,人家要求你必须得有一个根。
14:53
元素啊,其实啊,它的设计说只有一个根元素啊,不仅仅原因在这儿,还有别的地方,以后遇到的时候我们再说,好吧各位,哎,这是native修饰符,OK,那么截止到这儿呢?自定义事件相关的东西啊,我们就说完了,那么总结一波吧,各位来打开read文档。
15:12
划到最后啊,这儿呢,组件的自定义事件,诶,首先同学读第一句,它是一种组件间通信的方式,适用于各位谁给谁传呀,子组件给父组件传,同学我希望各位真正的把这东西理解了,如果说哎呀老师我也记不清,那自定义事件谁知道干嘛的,反正能传东西是不?我也没试过这个别的这个组件之间传递啊,反正老师讲的时候,当时就说了,适用于子组件给父组件传,那就传呗,啊你也没整明白到底怎么就适用于子组件给父组件传了,为什么别的组件之间它就不行,你琢磨一下各位你说就我刚才呀,去给这个student绑定自定义事件的时候,要么咋的你这么写,要么咋的你这么写,那同学你觉不觉得,就我目前的这个写法,你必须得有机会去写student的组件标签,你看这两个地方我是不是都得写student的组件标?
16:13
你只要在一个结构当中写了student的组件标签,也就是说各位我在整个黄色的模板当中,我能写出来这两个红色圈里的东西student组件标签,那你觉不觉得各位其实已经形成了一个父子关系了,你在APP的黄色的模板当中,你写出了这个和这个,那干嘛呢?干嘛呢?各位父子是不是形成了呀?啊,琢磨琢磨,所以说嘛,各位你是在父组件中给子组件绑定的啥自定义事件,那谁去触发自定义事件呀?当然是子组件处罚对不?各位所以说嘛,人家适用于谁给谁传子给父传对不对啊,可能有些同学啊,就较真儿了,哎,说老师啊,你别胡说啊,谁说的呀,我想给student绑定自定义事件,我就必须得写student标签,老师不是,你看着老师。我给你来一。
17:13
波student组件这不在这儿呢吗?老师你看好了啊,Data折叠methods折叠老师我就这么来一波,我就写一个什么呢?Mounted,只要student这个组件一挂载,我就拿到student的组件实例对象,我就直接点Dollar for on,老师我就绑事件,事件叫啥?老师就叫,哈哈,这事件只要一触发,OK,咋的?那来咱在这临时写一下,我就直接拿这个写了,老师只要一触发我就alert,或者这样说,只要一发,老师我就consolo,我就输出这么一个东西,哈哈,事件被触发了,老师我看你还怎么说?嗯,老师,我没写student组件标签呀,我在student里边借助这个钩子,我给student绑定了一个,哈哈,事件,老师你还跟我说什么?哎呀,适用于子传复老师,我觉得我只要这么一绑定啊嘿,只要以后有人触发哈哈事件,那我在这儿不就都能接到数据了吗?比如说data,那我在这写一个。
18:13
嗯,老师,我看你还怎么说,对呀,没写组件标签呀,没形成父子啊,Student绑定事件来,哈哈呀,能接数据啊,但是各位你再往下想一步,你琢磨琢磨,你给谁绑的,哈哈世界你给谁。嗯,是不是他呀,他是谁?是不是student的组件实例啊同学,那个原则千万别忘了,给谁绑的事件就找谁触发事件去,同学那也就意味着以后你想触发这哈哈事件,你在这个里边写绝对不行,为什么?同学你以为你在这里边写一个this点,然后写一个inmate就行了吗?各位,你写一个哈哈就行了吗?绝对不可以啊各位,为什么呀?同样是this,这个里边的this大哥,它代表着故组件的实力对象,而故组建的实力对象身上是没有哈哈事件的,对不?你根本触发不到人家那儿对不对?各位,所以说你看这个自定义事件呢,就目前来说,我们不学习那个事件总线,哎,就正常写这个自定义事件,你觉不觉得同学其实你是没有办法完成两个兄弟之间去传递数据的,是不是琢磨琢磨,哎,多说了几句,好,我把这个呢删掉,所以说同学第一句话我问一下咱能不能过了。
19:30
对不,为什么适用于子给父,就这么回事儿啊,可能有很多同学都问,哎,老师呢,父给子呢?同学你别忘了,这个世界上啊,父给子传东西,它无疑是最简单的,OK啊,往后我们会学到很多种啊,慢慢来。第二个同学使用场景来过一遍吧,说A是父,B是子,B想给A传数据,一定是子给父传数据啊,就是那个儿子给老子传东西,那么就需要在A中给B绑定自定义事件,同学,一个最重要的点,事件的回调是留在A中的。来,我们再回头审视一下这个代码,同学我问你啊,这块你干嘛呢?嗯,就这块是不是给他打了一个ref标识啊,那这呢各位干嘛呢?是不是在给student组建实例,在绑定at硅谷事件?好,各位,我问你绑定了爱的硅谷事件,那么事件的回调呢?事件的回调在这儿呢?那这是哪呢?这是不是这里啊,那同学我问你绿色框的这个函。
20:30
函数在哪呢?是不是在父组件里呢?所以说同学一个特别特别重要的点就是这个回调得留在哪呢?得留在父亲这。对不对?同学你琢磨一下啊,你通过这种方式或者这种方式,你给你的儿子嗯,绑定了一个自定义事件,当儿子触发这个自定义事件的时候,自定义事件所对应的回调一定会执行,诶一执行不要紧,他在哪儿呢?他在父亲这儿呢?那同学你觉不觉得就收到数据了,或者我这么说,各位,如果绿色框里的东西啊,你不写在父亲里面,那你说父亲还怎么收到东西呢?是不?各位啊,你就比如说各位我在这儿呢,写了一个外部的这个什么什么什么demo.js完,我把那回调啊,嘿,我扔这儿了,我扔这个demo.js里了,也就是说各位我在这去指定这个回调的时候,不是this点我通过某种办法我指到这儿,各位,那你说APP还能收到东西吗?不能了,那谁收到了这个demo.js收到了呗,哎,就这么回事,所以说回调得留在父亲那才是可以的啊,那剩下的东西啊,就简单了,绑定自定义事件第一种方式就是在父组件中,你借助子组件的组件标签,通过艾福。
21:40
或者V杠二,这是第一种方式,那么第二种方式呢,就是在父组件中给一个儿子打个标识,回头父亲一挂载就找到儿子去给他绑事件,对不?我这特意写了一个this.test那就要求咋的,你得提前准备好这个test是不?各位哎,然后第三个就是若想让自定义事件只处发一次,可以用ones修饰符,或者是用Dollar for ones这个方法啊,触发Dollar formit不说了,解绑Dollar for off不说了,来第六个组件上也可以绑定原生的盗墓事件,但需要用native修饰符。第七个读注意通过这种方式绑定自定义事件时,哎,就这回调,就这东西,要么配置在methods中,要么可以直接写,但是你得用什么呢?箭头函数,否则this指向会出问题。OK,各位,这就是自定义事件,为什么咱讲的这么磨迹呢?各位,因为接下来的事件总线就是建立在自定义事件基础上,OK,好,这一小节呢,我们听。
我来说两句