00:00
大家好,我是学习园地的特约讲师高若峰,上节课咱们看到了,从父组件可以将数据传给子组件,在子组件里边通过属性的方式去引用父组件的数据,那子组件呢,也可以把它这里边的数据通过事件的方式通知什么父组件去使用,所以呢,可以实现父组子件之间通信,当然了,有多少层咱们都可以通信的。那除了通信之外,通信呢,是涉及到数据在父子之之间,组件之间来回传递,那有的时候呢,我们有一些特效的方式,比如说咱们一点击增加数量,对吧?当然这只是简单的一个方式了,那我们需要在父组件里边把调用子组件里边的一些方法和数据来完成对子组边操作,只不过在副组件里边发通知,要子组件本身的这个逻辑来处理,那子组件里边有的时候也也会用到找到组件,调用副组件的方法来完成副组件的一些操作,你比如说。呃,我们通信是能完成数据之间的通信,对吧,但是呢,对象之间的访问不可以,那对象之间的访问如果涉及到父字组件之间的访问,那我们就需要通过这种方式,子组件调用父组件的方法,或者是呃里边的data数据。
01:09
来完成,那我们有这么几个呃变量,那我们来试一下。你比如说我们现在,嗯,在子组件里边,我们先访问负组件,比如说子组件里边,我们现在调用这个数据,对吧,现在一点加,加点点是把数据传给副组件,用负组件改变这个数字,让它相加对不对?现在呢,我们只是调用负类的方法,用负类方法本身去加价就可以了。你看我们现在比如说这是副组件,副组件里边呢有一个。下面往下打准边这块挡着,那这个数据,那副组件里边有一个方法,我们随便写一个方法在这里边。啊。这样的方法有改变。改变nu就改变N吧,要用的方法名尽量是不一样的,因为咱们声明好几个方法名有重复的,让这次里边的con加加,你看这个方法呢,我在复类里边,这里边任何地方我加实件,当然都可以调用到这个方法,对不对,但是呢,我把这个方法生用在这,但是我不在这个组件调用,我在这个组件里边,对吧,我们现在我想在这个组件里边,比如说后边我再加一个按钮,再加一个按钮,嗯,Bo。
02:17
这块我来个加加,相当于调用副组件的意思,对吧,然后这里边click点击的时候调用,这里边我随便声明一个方法啊,叫做Y方法,你看一点击加加的时候肯定会调用到万方法,也就是。在这里边我们加一个。随便定义的整个Y方法,你看这里边儿点击一下,这里边儿肯定会调用。Log这边直接想啊,我是子组件子组件。Yonn中的Y方法啊,我调用一下这个,我现在一点这个下边打印,我是子组件中的这个方法肯定是没问题,对不对,但是我在这里边想调用副组件中的声明的一个逻辑方法,要数副组件来完成这个数加加,那怎么办呢?那我这边可以通过。
03:05
this.dollar print parent,这是Dollar符,这里边就本实例里边能找到它所在的副组件,那找到副组件就可以调用副组件里边的属性和方法,那这里边的属性比如说。你看这里边儿有这个对吧,属性,那我可以直接打一下副组件的这个属性con。你看相当于也是把这个属性拿过来,就它的里边副组件定义的数据拿过来点rog。你看这里边儿,我们点击一下。你看零对吧,那我们在这块还可以怎么着,既然能调用到这里边方法,那P能不能调用到它里边方法,这个方法呢?来我们看一下能不能用到点击加加,你看上面加了对不对。加加加加加,你看也能够通过这个访问到副组件中的这个方法,访到副组件中的这个数据是可以的。那我们还可以往上一层再调用,比如说这个里边APP里边如果还有方法和属性,这里边当然看一下它有没有属性,属性MSG对不对,有这个方法那。
04:11
里边没有没有方法,那我就直接用那属性吧,当然你这里边也可以声明一个声明方法,我再声明一个吧,比如说me ods声明方法,这里边声明比如说to的方法。嗯,这是APP中的方法,Appt我教这个方法啊,然后这里边我就随便打印一下,嗯,LG打印一下,这里边我是APP root跟组件的组件中的APP met方法。那我们现在如果在这个孙子这个组件里边,我想访问到上层的,假如也是点击这个,那我们可以这点啊,这1.prt访问到副组件,相当于访问到这个,它又在APP里边,所以呢,再导入PRT就访问到这个APP的组件,那我调用这里边的,比如说这里边有一个MSG,这个点lo打一下这个。
05:04
那我们点加价。你看这是APP数据的MSG对不对,那既然能调用这个方法,那我们同样这次里边的高PT点,高T点里边是不是有一个啊APP met这个方法呢?来我们点击一下,你看我是APP木制组件中的这个方法,通过这个可以多层调用,但是如果有很多层很多层的话,那我们这样调用就比较麻烦,所以怎么办呢?我们可以直接通过一个root直接访问到根节点,来我们再试一下,把这些都清除掉,重新点击一下。你看这是主语,这这个方法对吧,这个数已经到三了,然后呢,这是APP中的这个数据,这是入节点的这个方法,你看也是可以的,所以通过parent访问上一层组件节点,那通过这个呢,访问上两层,上三层,上四层,一直呃串行编程连下去就可以了,如果直接回到顶层的组件,这样就可以了。
06:00
这样的话,在主组件里边可以访问副组件,这是没问题的,通过这样的方法。那副组件里边能不能访问子组件中的方法呢?你比如说。我们在子组件也是这个组件里边,我们这个消息后边我们加一个,也加一个nu,一个数nu,那么在这里边拉了nu,嗯,是零。是零啊,这块有点对吧,加加前面这加加按钮前面对吧,我这块拿过来。放到这块来个B,放到下边。那零状况是不是有了,那我现在可以什么?这有这个方法,那我在这里。生命的一个属性啊,当然我可以在这里边方法去改变它。上面有改变这个数了,就是你原来喜欢方法,我不你动啊,这里边我给写ang改变,嗯,这个n nu,我就是叫做。嗯,换吧,随便写一个对吧,然后这次里边的nu加加,你看让这个数加加,当然我在本组件里边调用这个方法肯定是没问题的,但是我现在需要在副组件里边调用到这个方法,也就在这个里边调用子组件的方法,你看啊,在副组件里边,我们在这个黄色按钮这个下边吧,我们这块再加一个。
07:16
加一个按钮,比如说BT啊。让子组件数。加一。有点长横,嗯,子组件加一,子组件加一这个对不对,那是不是要这个数加一啊,那在这块调用这个我就可以click c CK点击的时候我随便做一个方法啊,嗯,TW。这样的一个方法,不知道这里面有没有。嗯,没有对吧,那我这块就加一个TW随便写的一个方法命名,然后这里边假如说我直接logg反应一下,我是负。组件中的TW方法。你看我现在一点击这个。
08:00
现在我这块又。断网啊。所以得刷新一下,刷新一下,然后我这我这网络是断的,然后我们点击一下你看。这是你组件中的方法,嗯,行么?这是副组件不是。副组件中的出方法对吧,所以下面出现这个错误啊,你先当在服务器的一些,你看出方法对不对,那这方法里边,如果我想调用子组件中的这个方法,如果我能调用到。用到这个方法,那么就能让这个数加加在父组件里边访问,访问子组件中的成员。那怎么办呢?这里边我可以用上,你看在V2里边有一个这个方法高符,嗯,就是this里边高这个方法,它代表的是一个数组。那所有的子组件全都获滤到,但是这样操作没有必要,所以在V3里边3.0之后把这个东西给删掉了,删掉之后呢,如果是一个数组的话,就通过数组里边零访问第一个组件,第二组第三个组件,当然也有顺序关系,对不对,如果你中间插一个组件,这个顺序就改变了,所以呢,呃,不建议这么做,就算有也不建议做因三里边,何况把它去掉了,那去掉了,那我有这么多子组件,你看啊。
09:07
这两个子组件对不对,那我调用这两个字组件中的哪个方法,那我这块就需要通过ref给起一个别名了,比如说我们叫做Y。起个边名,这个名字你随便定义,就相当于给这个组件起一个名字,不然你有很多子组件,它是个负数,怎么绑不到啊,然后我们在这里边就通过this refs,那这里边是能找到所有你起引用结名的。这样的,当然我们起了一个名叫做万,这样就会找到万万里边有个什么方法下定义名,咱们都有点记住了,叫做什么,趁着西人记万方法。你看我们现在点击这个自动件。这是突方法,这是方法调没问题,但是现在这里边儿没有调用到这个。这是了。哎呀,这个万。咱这块换一个名吧,叫做AA,随便写了一个AA if在这里面写了一个AAA的一个这样的一个方法,你看这个组件里边起了一个re EF,我随便起的啊,叫AA,那这里边呢,我们就随便叫一个AAA。
10:13
刷新一下。然后你点击组件,你看这个数相加了,你看增加增加增加,但是下边这个一价对吧,因为组件它是一个负数对吧,那如果我这里边写一个ref等于。Bbb这样的一个方法,就是这样一个引用别名,相当于引用名称对吧,那我在这里边是不是就可以来调用一个bbb里边这个对吧,然后我还可以分别打印,你比如说C,呃这块呃,Rog打印这里边什么,这次里边的refs里边AA里边的我们这个变量名称,我们起的叫什么叫n nu。对不对,所以我可以直接访问到这个N,然后我也可以访问到这里边的。bbb.n不一定说调用方法,调用它里边成面形对吧,但这只是之间,只要找到这个对象,就可以访问这个对象任何成员,当然通信的我们还是用上节课咱们讲的方法啊,这只是找到这个对象就可以调用对象里边的实例,里边的属性也好。
11:12
画画也好,都可以调用了,来,我们刷新一下。你看你现在一点这个会不会调用两个你看都得加。都在讲看到了吗?下边也都在打印对吧。因为咱们有多个子组件,你可以一个一个调用,也可以一起去调用。所以呢,它是一个负数,所以在呃V3.0里边这个给干掉了,所以这块加了一个灰色,是这样的,这就是我们父子组件之间的通信,呃,访问方式既可以通信又可以访问。但是访问有的时候呢,呃,用的没有通信的多,我们通信用的比较多。这是这种方式啊,只要是了解组件之间的一个引用结构,那我们就可以随意的去操作。就把我们这些组件合到一起,看成是一个大的组件一样,但是呢,又回归到不是组件开发那种思想了,这些组件就颗粒化拆成一个小组件,那拆小组件,看似组件之间是独立的,其实呢,它是这种倒数的关系,那倒数的关系既可以相互通信。
12:07
你只要知道相互通信,记不住这些方式没有关系,那先用信轴也是可以的,知道它是可以来回通信的,就数据可以传,数据呢,是各种类型的对象,数据字符串,呃,数字都可以,对不对,可以通信,还可以互相访问子组件,可以找到父组件的对象,那访问父组件中的属性和方法,那还可以往上头找父组件也可以找到子组件,这就是。组件开发中的组件通信和组件之间的访问,好,谢谢大家,这节课我们就到这。
我来说两句