00:00
好嘞,各位,那在这一小节呢,我们给大家说一组特别简单的东西啊,叫做provide与inject,首先我们看看这两个词啊,都是什么意思,打开有道查一下,先看看这个provide,他执译过来呢,有提供准备,哎,甚至还有抚养的意思,那在我们这儿呢,取这个含义啊,叫提供,哎,说老师提供什么呢?提供数据啊,说老师谁给谁提供数据啊,一会再说呗。啊再查查这个词inject,走这个词呢,直接翻译过来啊,有注入注射的意思,那我们取这个含义啊,注入,哎,说老师注入什么呢?注入数据,谁给谁注入,诶一会再说,关掉。这个provide与inject是一种组件间的通信方式,而且特别适用于祖孙组件间通信,那你就得搞明白啥叫祖孙是吧?各位来,一般来说呢,我们管这个称之为父,哎,就是这个级别的啊,给你画个红色的框管。
01:00
这个级别的叫做父是不?那管这个呢,就得称之为子,那管这个级别的呢,那你说叫,哎,叫孙,那如果说他下边还有一个层级呢,哎说老师叫重孙子,没恁说的,哎,一般叫后代组建了,对不?各位,而且父子的概念是相对的,大家觉得呢,我说他是父,那么他就可以是子,对不?各位,哎,那我说他是父,他就可以是子,那我说他是父,那这是子,那这就是孙呗,是不?各位,哎,那如果我不说他是父,我换一个词儿,我说他是祖先祖建对吧?祖先的祖祖祖建,那所有的这些是不是都可以称之为后代组件呀,是不?各位啊,那在这儿呢,他说呀,这个provide与inject适用于祖孙组件间通信,那同学也就意味着啊,来,我再给你补点这个图,我再补点啊,走在这儿呢,我再补一个好。
02:00
OK,各位,你说谁和谁之间叫祖孙呢?如果我说他是祖,那么我问你这些是不是都是孙啊,换一个颜色的画笔啊,换成这个橙色的加个粗,我说他是组,那你说这一堆是不是都是孙,中间是不是隔了一个级别,那如果我说他们三个是祖,那我问各位这块是不是就是孙呢?所以说有的时候呢,我们也管祖孙组建叫跨级组建,祖和孙之间隔了一个父嘛啊对不?各位也就说这是祖,那这些呢,就都是孙呗,是不?各位,哎,就是说跟人类社会关系的那个东西是一样的啊,在这呢,就不再赘述了,然后你看他这图画的啊,说通过这个provide把东西给谁了啊,给这个组了,然后在孙里面通过inject可以得到,哎,就是这么一个数据的传递非常简单,那回到代码里,各位,我要做点准备型工作啊,我得多建立几个组件。
03:00
Components,然后呢,我建立第一个组件啊,Child啊child点就是子组件啊,那就再来一个son.v孙组件是不?各位APP里边呢,不用写这么多了,来全选都给它删了,干干净净的咱从头来啊,其实同学这个东西非常简单,只不过为了演示啊,你得做很多的铺垫啊,那在这呢,来一个div啊说老师不是不用那跟标签嘛,我是想给整个这个结构啊加一个背景,要不我也不想写这个呀啊APP然后在这儿呢,简单写点样式啊APP走来一个背景,背景呢让它是灰色的吧,再来一个攀啊10PX,让它离得远一点啊来写一个名字啊,名字呢叫做APP好了,在这呢,同学说出一句话,我写1H3吧,叫做我是APP组件啊,这块呢,写一个括号就可以认为它是组组件,对不对?祖先嘛,一切的组件,好了,那这一堆东西给它复制关掉,回到child的里。
04:00
点粘贴慢慢改,首先这块得改childd对不?那在这儿呢也得换childd child的同学可以认为是子组件,你说对不?哎,就是你看相对谁来说对不对?我一切都是相对于APP来说,好吧,各位啊,再往下,这是不是得换名childd child啊,那在这呢,同学也得换一下啊,这是child,这呢也是child,颜色呢换一下啊,这回呢,让它是贴蓝色吧,OK,这一堆写完了复制,然后再来找到这个孙组件这块son这块也得改啊,这是son,这回不是子了是吧?是孙组件,那在这儿也得换son啊,再往下把这个拿过来走,颜色换一换啊,让它是orange,让它是橙色的,然后接下来呢,我想实现一个套娃的效果啊各位,这个红色的呀,是APP,绿色的呢,是child的,然后里边这个黄色的呢,是那个song啊来吧,那写一下来到这儿呢,首先第一步你得引。
05:00
对不对?各位引入谁呢?这个child from当前目录下的components下的child,那么引入完了之后呢,就得注册对吧?好,注册完了呢,就得使用一下,对不?各位我为什么给这三个组件都标上颜色呀,让你知道他们谁是谁,OK,你看APP里面用到child的,那么同理,这个child的里面还得用到谁呢?哎,那个孙组件引入这个song from当前目录下的这个song,然后在这儿呢,还得注册一下components走你然后在这呢,还得使用一下是吧?走OK,写完了吧,看一下页面的效果啊回到这刷新一波啊,APP这是子,这是孙,对不对?那接下来呢,各位我想把这里边的数据诶传递给谁呢?你看好了,我想传递给孙隔代组件嘛,中间隔了一个child啊,先去APP里面准备点数据啊,准备点什么呢?随便写吧各位啊。
06:00
来一个setup,咱们还是给他准备点汽车的数据吧,写一个汽车啊,等于一个别写ref了,给他写成一个对象reactive啊,来走着,然后在这呢写一个reactive,在这就可以用了,来给他传递一个汽车的对象,名字呢,是奔驰啊,在这呢,再来一个price,就是价格吧,比如说来一个40啊WOK,写完了,那把这个汽车的数据呢,是不是得交出去啊,哎,一个car,那么精简一下啊,这儿呢,给它汇成一行。调整一下,这呢也给它变成一行啊,调整一下看起来能清爽一点啊走。走,数据准备好了啊,也交出去了,那自己这展示一下呗,在这儿呢,来一个逗号,然后直接展示那个车的名字和那个价格啊,那在这儿呢,同学,我想用一下这个东西啊,Two ris啊,我想把这些东西啊给它拆开之后传过去,那我就直接写了啊,这来一个two ris,然后把谁拆过去呢?这个carr好,那在上方啊,我用起来就简单了,直接插值语法写上这个车的名字,再来一个杠杠啊,再写一个,这回呢叫做车的价格啊好了,来看一下效果啊,刷新一波奔驰啊,40万啊,自己的数据准备好了,我不是想传给他吗?啊,那怎么传呢?非常的方便各位啊,你想给别人传数据,你就用刚才咱们看到的那个provi provide,哎,提供也就是这东西,哎,刚才看到的provide,那你想得到东西就是inject,诶,就注入你看图中的体现吗?Provide inject来吧,各位APP想给自己的孙祖。
07:37
键提供数据,那么就直接在这儿写,各位你不能在这儿写啊,Return下方的代码都执行完了对吧?逻辑都停掉了,在这儿写,那么在view里面引入这个人谁呢?Provide,哎,提供嘛,啊来走,它是一个函数,直接调就可以啊,传入两个参数啊,第一个参数呢,就是给你传入的这个数据啊,或者说提供的这个数据起一个名字,你比如说我叫carr,随后呢,把你真正的数据啊给它带过去,诶在这儿呢,Car OK,写好注释啊,这叫做给自己的同学,我说的精准一点吧,咱别说孙组件了,说的通用一点,给自己的后代组件传递数据,什么意思呢?就比如说APP在这儿同学,然后呢,它有很多的这些层级,对不对?来,我再给你画走走,这会儿呢再给你画走走,也就是说,你在这儿一旦写了provide,那么你在任何一个位置就是这儿inject,这也能,这也能,这也能。你在任。
08:37
和想要数据的地方,你写一个inject就可以了啊来各位数据呢,已经提供过去了,那么回到哪呢?回到我的这个孙组件里面啊,那在这儿我得怎么写,同样啊,你得去这个view里面引入一个人,哎,From这个view引入谁呢?这个inject,哎,就是他来,那怎么得到数据呢?非常简单,同样的你得写这个setup这个配置项,当然别忘了这的小逗号setup比三嘛,就别写那个data了,Setup,然后在这里边呢,我写一个inject,然后调用,然后说你想得到哪个数据,你直接说这个car就可以了,因为那边提供的是car,你这边就能呼唤到这个car,然后在这儿呢,Let car你就可以得到了啊那你看一下效果,在这来一个consolo,诶consolo我给你输出一下这个car,然后后边呢,我给你跟上几个分隔符吧,星来看一下效果啊,回到这边刷新同学,瞧,数据数拿过来了,而且注意各位还是一个响应式的数据呢。
09:37
啊,那这个时候你知道我怎么写了,这car呢?你已经拿到手里了,各位别输出了,你说接下来干嘛呀,Written啊,那这回换一个写法,不用那个to ras了,直接给这car,那你说页面这得怎么展示呢?来一逗号差值语法读出car.name好,那在这呢,杠杠,再来一个叫做car点什么呢?Car点这个pricece哎,价格好了,那看一下效果啊,刷新各位怎么样APP那的数据吧,哎,越过了child,直接把这东西给他了吧,同学,我们之前得怎么传递呢?
10:13
啊,如果说父想给孙传点东西,或者说祖想给孙传点东西,先给子子呢,其实也不想要,但是他得收,收完了之后呢,哎,再往下传,逐层传递,这多麻烦呀,是不?各位说老师,那如果孙组件里面还有一个呢,还有一个绿色的,那怎么办呢?同学也可以用inject说,老师,那我知道了,就是他不行呗,哥们儿他也行,只不过我们不用这种方式来回到child里面,各位你不是说他不行吗?咱们测试一下啊,走着还用什么呢?来从那个view里面引入那个东西啊,走from view引入这个inject啊,然后在这呢,我简单写一下啊,Let一个X,等于inject说你想要什么?CR,然后在这呢,Consolo输出这个X,但我得让你知道啊,它是什么呢?它是这个child的组件输出的,所以说在这呢,我给你来一个child的,然后杠杠杠看一下效果啊,各位刷新一波,你说能不能得到,能各位就。
11:13
只要您在这儿provide一下,在任何你的后代里面都可以进行inject啊,不管你藏的有多深,哎,同学,这就是一种组件间通信的方式,觉不觉得还挺爽的,没有写那么多繁琐的东西对吧?各位,但这儿呢,同学,父子之间我们一般不用这个什么provide inject,而且官网的图的体现,同学你看人图怎么告诉你的,在这怎么着叫做提供,在这怎么着叫注入,中间这块怎么着不用去考虑说老师呢,他想给他传递点数据呢,各位,请用这个世界上最简单的东西props对不?各位,哎,OK,那么套路就是副组件有一个provide选项来提供数据,那么子组件呢,有一个inject选项来使用这些数据。同学,别叫子组件了,精准点套带组件是不那么具体的写法,就是祖组建中这么写,孙组建,或者说后代组建,后代组建中,哎这样,那我把这些改一下吧,各位啊,实现族,然后呢。
12:13
与后代组建键通信,OK,这就精准了是不?各位好了,那我把这个呢复制一份,走着,嗯,给它重命一下名18_src,那讲的什么呢?来把这名字给它拿回来,叫做provide与inject,这词你别写错啊,来,走着把它来一个下划线,OK,各位,那么这一小节呢,我们停。
我来说两句