00:01
哈喽,各位小伙伴们大家好,那接下来啊,咱们呢,要讲一下子组建实力自身的到了children与到了parent属性。那咱们呢,看一下子现在已有的这个小项,这样的一个结构。那么首先说在这里啊,有一个叫做爸爸有存款1000元,以及有三个按钮。那咱们呢,去找一下子相应的这个结构。在这个结构当中啊,有一个副组件叫做children parents test点啊这个呢,就是它的一个副组件。在副组件当中看一下它的结构。虽然说这里有一个HR标题,那文本是爸爸有存款,Money,钱。而money呢,在副组件当中已经啊有了,是一个享是属性是1000元。那所以说啊,可以在结构当中看到这句话,就是爸爸有存款1000元。以及在底下有三个按钮,分别爸爸找小明,就是儿子借100。
01:06
找小红女儿借150,找所有的孩子借200这样的三个按钮。那看一下对应的就是这块的结构对吧,三个八的。以及在这个结构的底下呢,还有两个子组件,分别是丧和doctor,丧其实就是谁啊,就是儿子小明,而doctor是谁呢?是女儿小红。对吧,而且呢,要注意在父组件当中,咱们呢,已经引入了相应的子组件,看一下这里对吧,那这里呢,咱们已经把相应的子组件引入进来了。那以及呢,也进行了注册,那当然在这是可以使用的。那接下来呢,咱们呢,就是通过这个案例呢,去学习一下子Dollar children与Dollar parent这两个组件实例的属性。
02:00
那咱们呢,一点点的去完善啊,完成一些功能,比如说做第一件事儿。当老师点击找找小明借100块钱的时候,就是一点击他的时候。那也就是说,爸爸要找儿子小明借100块钱?那爸爸的钱是不是在1000的基础上加100变成1100?那小明这是儿子组建丧,他原来有3万块钱,那爸爸借走100,那是不是在3万的基础之上,是不是要减去100块钱?对吧,那假如说你点击的是小红,那也是一样,那爸爸的钱是不是在已有的数字的基础之上是不加150,而女儿2万块钱是不是要减去相应的150块钱。那所以说啊,咱们呢,得通过代码去实现。那首先说看这。当老师点击这个按钮的时候,那咱给他绑定个事件click。
03:00
那他要干什么?是不是要找小明借钱?那咱给他来一个回调吧,叫borrow b。啊。Oww或者咱们就叫做借钱哎。借钱。For from,从谁呀,从小明。对不,那你要借多少钱啊,你得告诉人家,你是不是要借100块钱。但是你要注意,咱们现在只是给这个按钮绑定个单击事件。那相应的回调咱们并没有写,那咱们去写一下咱们的回调啊,Method在这儿。那这块呢,咱们做一下笔记,这是干什么?是不是应该是向儿子小明借钱?对不,那当然这个方法这你不能写100了,你得写money,写行参。那咱们呢,先alert一下,Alert个123,先看一下子点击这个按钮能不能,哎,弹出咱们相应的数字,这是没问题。
04:01
但是你要琢磨一件事,当你一点击这个按钮,你要做什么?就是一点击这个按钮,你要做啥。并不是说弹出个一一,你要明白,当老师一点击爸爸找小明借100,那爸爸的钱是不是应该在1000的基础之上,得加上这个100。这个后者。对吧,那也就说这是谁,这不就是负组件实力吗?This的money,爸爸的钱加等于多少?加等于money。对吧,那咱们呢,可以看一下子,当老师一点击找小明借钱100块,你看副组件的这个钱是不是涨了100。但是你要注意一件事,什么事?既然儿子已经找他的老子啊,也就说老子找他的儿子借了100块钱。那他的儿子的钱是不是应该在3万的基础之上减去100?那接下来的问题是在这儿先看一下,做一下笔记,这是父组件的啊,钱数啊,前。
05:06
数怎么的是不清累加,哎,累加100元。那你接下来的问题是,那如何获取到子组件,让子组件的钱在已有的。基础之上减去100。那这是咱们要解决的一个问题。就是如何在父组件当中获取到这个子组件。让子组件当中的这个数据money,那子组件当中这个儿子这不有3万吗?让他减去100。那咱们呢,先说第一种解决方案,第一种解决方案是可以打上打ref。Ref,比如说咱们叫什么叫小明,那咱们应该知道ref。类似于咱原生道当中的ID,可以获取到相应的节点。对吧,这块咱别忘记ref是不是可以获取,咱原来是不是知道是不是可以获取节点,那当然那咱们的这个组件它不也是一个呃标签吗。
06:08
那当然,你可以通过ref获取。那咱们可以打印一下console.log face.dollar re FS,点小明,你看一下能不能获取到子组件实例。那咱们呢,打开咱们的控制台,咱们的瞄眼看一下能不能获取到。能不能完全可以,那就说子组件,你可以获取到那子组件相应的小式的数据,能不能拿到可以。那也就是说爸爸,哎,加了100块钱,你子组件face.dollar r FS点小明的money,你应该是减等于MONEY100。那这样不就实现了,诶咋的。老子找儿子借100块钱,老子多了100块钱,但儿子少了100块钱。
07:02
对吧,你再点那是不是就接着再上。对吧,那这样是可以实现。所以说在这呢,你得想明白一件事,什么事就是ref,它可以获取到真实的到节点,那当然。也可以怎么的,哎,当然也可以获取到什么呀,获取到子组件的啊这个标签。操作啊操作。它可以操作,哎,写一下操作子组件的数据与方法。对吧,因为你想想,既然已经能拿到子组件,那子组件的数据和方法是不是都可以获取。那如果说这个按钮会了,那这个就简单了。对吧,找小红借150,那跟这个是不是一模一样。那也是一样,当一点击这个按钮,Click。那这回呢,也是借钱,从谁那儿借,从小红。
08:06
借多少钱?每点击一次是不是借150?当然咱们没有这个回调。那你还是需要书写这个横调走。那这块呢,咱们也做一下笔记,那这块是在干什么,是不是向女儿哎女儿哎借钱。那当然啊,这块呢,你得换成谁,换成money啊,你不能写150,因为这是个行参,那当你一点击的时候,副组件的money就是老子的钱,是不是要加等于MONEY150。而你的子组件那也一样,那它是不是也可以打谁打ref。为什么为小红?那小红的钱是不是要减等于一百五啊,那就是这点到refs点小红。点money,哎,减等于money,那你看这不就实现了。所以说,如果顶上这个小明的能搞定,那小红的不也就完事了?
09:04
对不啊,这是这两个按钮。但是你要琢磨一件事。咱们现在其实这两个。回调所做的事情其实都是一样的,就是可以通过什么,这块你得想明白。就是在voe的组件当中。组件当中。可以通过什么,通过refs啊,通过re获取子组件。那你就可以进行什么了,哎,就可以进行操作子组件的数据与方法。这件事儿你要想明白。那接下来咱们再看一下底下这个,哎,找所有的孩子借200,那这个是不是也是同样的套路。对吧,那咱也是一样,那给他绑定个单击事件艾特click。那这个咱起个名字叫做借钱。For。
10:01
对不借多少钱,200。那当然咱们也没有这个回调。那你需要咋的,你是不是需要写一下呀,对吧,所以在这也做一下笔记,这是啥,是不是找全部的孩子借用200。找,那当然这也得换成谁money。那这块呢,你得想明白啊,咱刷个新。那比如说当你一点击这个按钮的时候,那父亲应该加的是400,为啥呢?因为你找儿子加200,找女儿也加200,那说白是不是唠叨400。那所有的这俩孩子是不是每人减200对吧,那所以说这块好整,就是这点money负组件的钱他应该加等于啥二倍的哎,Money。对不,那咱们呢,可以先看一下子,当一点击的时候,是不是加400。那当然子组件它里面相的数据没有发生变化,那有同学可能会说,那老师那不同样套路吗?怎么写z.Dollar res,对吧?这种写法当然可以。
11:07
但是这里面咱们就不再用ref了。OK吧,这里面呢,老师呢,想告诉你们一件事,什么事。就是组建实例。他自身拥有一个属性。叫什么?叫Dollar children?他可以干什么呢?可以获取到,哎,可以获取到。当前组件当中。它的所有的啥全部的子组件。咱们呢,可以打印一下cons.log这点到数据。那咱们呢,可以一点击的时候,你会发现,诶,我可以拿到所有的子组件,那这不就是这俩。而且是放在一个数组里面。那你这块就可以怎么办,可以这么办,让所有的孩子。他们的钱是每个人减多少,减200,那是不是就可以变利了,对不,就是这点到出去点for each。
12:08
对吧,有item item是什么?就是每一个子组件让每一个子组件的money减等于多少,减等于200。那咱们可以看一下子,那实现的效果是不是一样。对不?对不,所以说从这一刻你得注意,你得注意啊,就是到children菌它可以干什么,可以获取到当前组件。它所有的子组件对不到,写下到了。Child children去,那咱们写一下子Dollar childd2in children去是组件实力的属性。可以干什么?哎,可以获取到当前组件的全部的子组件。哎,子组建。对不,那当然ref是不是也可以获取到,可以获取到某一个组件的啥,是不是子组件。
13:08
但是你要注意到了,车菌,它返回的是一个数组。对不,如果子组件过多,它是用数组去装的。但是这里面呢,有一件事一定要注意,千万别这么写怎么写,说老师他是个数组,你这么搞呗。啊,切记。切记别这样啊,别这样书写,怎么写就这么写,Sister Dollar children,因为它是个数组,说老师,第零项不就小明吗?小明的money,哎,减等于呃,200。对吧,完了这点CHILDREN1。对吧,点money。哎,减等于200对吧,这不一小红吗?这里一定要切记,你别这么写,为什么呢?比如说如果子组件过多。如果子组件过多。过多那一定要注意啊,那这个第零项。
14:00
啊,第零项。啊,D0项,也就是说D0项,它可能A0。第零项。可能不是。小明举个例子,比如说父组件有1000个子组件,那这个数组里面到底第零项是谁是不确定的。所以说尽可能别用这种呃,中括号加下角标这种形式。好吧,所以这块一定要注意一下,那你看那咱们是不是就实现了,哎,找所有的啊子节点,比如说。儿子女儿是不是借200?对吧,那这不就完事了。好了,那之后咱们再看一下子。在子组件内部,你看啊,这是个灰了吧唧的是子组件,在子组件的内部啊,有两个按钮。这两个按钮分别是什么呢?就是给爸爸50。对吧,举个例子,现在在子组件内部是不是也有个八一点击给爸爸50,那你说爸爸这要多50,儿子这是不是要减去50。
15:02
对不,这不也是父子组件通信吗?那咱们呢,看一下子找一下子儿子吧,先找一下儿子,这不小明嘛,他这块有个按钮叫给爸爸50块钱,那咱们看一下在哪,是不是在这。对吧,给爸爸50那一点击他来,咱来一个呗,艾特click。比如说咱起个名字就叫做give啊,Give money。给多少钱呢?给50块钱。那咱们的有这个回调吗?没有,那你需要在子组件的内部去书写相应的回调。咱来一个呗,对吧,那这是啥,这是呃呃儿子。小明给爸爸钱的回调函数,那当然你这儿不能写50,你得写行,Somebody money。那这块你要注意,当在子组件内部点击子组件内部这个button的时候,那儿子的钱是不是应该减去50。
16:00
那应该是这点money减等于多少?减等于50。也就是说在子组件内部,咱们可以看一下的,在子组件内部。你要点击这个按钮,你看啊,是不是儿子少了50块钱,但你要注意爸爸是不是得多多50。对吧?那接下来咱们遇见的问题是什么?你需要把这写一下吧,这是儿子。小明的钱减少了50,那你要注意,你需要在这里做另外一件事,啥事?需要在子组件的内部。获取到啥?获取到副组件。哎,负组件让负组件的数据怎么的,是不是加加上应该是加上多少加上。那么如何在子组件内部获取到父组件?很简单,叫做Dollar parent。咱们可以通过this点儿Dollar parent属性获取到某一个子组件的啊,这个副组件写一下。
17:05
可以。通过Dollar。Dollar parent parent的属性,那获取到某一个组件的什么副组件,那你就可以怎么可以操作副组件的啥数据与方法。那父亲的money?应该怎么的,是不是加等于哎,加等于money加等于50。那所以说咱们可以看一下刷新,你看一下当一点击儿子减50,爸是不是加50。那儿子如果能搞定,那小红女儿是不是一样一样的?对吧,而且代码几乎都是一样的。那咱们也找一下子女儿。你看,那这不同样道理吗?也是讲爱的。对吧,当然这不能有空格,At click,这咱们也叫什么叫give。Money。
18:01
他给多少钱呢?给100块钱。那其实啊这块呢,你都可以把儿子这块代码直接粘过来。对不,因为他俩的业务逻辑是一模一样。对吧,那这个是啥,是女儿,哎,女儿小红,哎,给爸爸的钱,小红。对不,其实业务逻辑都是一样的。这咱们给它隔着画一下,那这块是减等于多少,是不是减等于money啊money啊,当然咱传的是50,那这块咱也是写上money啊money。对吧,你看业务逻辑都是一样的,完全就可以直接粘回来,那你看一下。找你刷新看一下走。走对不对。对吧,那所以说咱们也做一下笔记。咱们又学了个谁与Dollar?看Dollar per parent,那这块咱们也写一下吧,Dollar per parent组件啊,Parent。
19:02
那么组建实例的属性,它可以干什么?可以获取到?当前子组件的啥是不是父组件那进进而啊进而可以操作。哎,可以操作副组件的数据与方法。对不啊,所以说这块呢,一定要注意,那说白了,Ref和Dollar children可以获取到子节点啊,子组件,而到了parent可以获取到啥是父组件。所以说这块呢,要注意一下。
我来说两句