00:00
大家好,我是学习园地的特约讲师高若峰,上节课咱们看了,从副组件里边向子组件传递数据,使用的是属性的方式pros,通过这个属性,那我们可以将任何副组件的数据都传给子属件,子组件去使用,也就是我们应用场景就是什么?就是我们在做一个页面的时候,所有的请求数据都是在跟组件里边一次性向服务器这块的请求过来,然后再分发到每个子组件里边,让它去显示,这是我们应用场景。那么还有一些应用场景就是什么?子组件里边的数据需要传给父组件里边去应用,就需要通信了,那么我们父组件传给子组件通信,子组件传给父组件当然也是通信了,那子组件传给父组件,通常通都是通过事件的方式去传递的,那我都说为什么是事件传递啊,因为父子件传给子组件,咱说了请求结果的数据,然后分发向子组件显示,这样是应用的场景,对吧?那子组件什么场景下需要把数据传给附属件呢?你比如说咱们举个例子。就拿这个来说。比如说关注我们这块,这是一个大的一个组件,那是外层组件,外层组件里边这些选项卡都是子组件,那子组件当鼠标放上去的时候,那就需要让这个子组件里边显示我鼠标放上去的时候展示的一个视频。还有你比如说。
01:16
像你的总监这块鼠标一放上去显示某一个老师当时网速慢啊,相片没有变化,没有变化对吧,我的网现在用的是2G。你看这个数据实现的是变化的,那也是什么,相当于把我们的子组件里边的数据通过事件对吧,传给我们的父组件。这个王。你看是这样的一个一个情况,也就是子组件在什么情况下需要把数据传给组件呢?通常都是跟用户交互的时候,有有什么有事件发生的时候才会把数据传给副组件,你比如说选项卡把选项的ID传给副组件,那副组件呢,根据那选项ID到服务器去取数据,然后在页面上渲染,是这样的一个过程,所以呢,子组件需要通过事件触发的方式将数据分发给什么负组件。
02:05
那我们就做一个这样的一个场景。你比如说我们在呃副组件里边,也就是APP里边存多少层都是可以的,一会儿我给你看一下传递的数据,比如说我在这个里边找一个,呃,我用这个组件和,因为它也是副组件,它也是下层组件,对不对,这只个接收属性,那这是它的底层的组件,那比如说我在这个组件里边,那我找一个地方,比如说我在最上面嘛。最上面我这块来一个,呃,Div div里边。我这块简单加一个样式啊宽度。100像素,呃,高度。是50像素,然后bak加背景颜色red,呃,来个yellow吧,黄色的,然后这会来一个差值,来一个con,随便来一个属性,那这个属性呢,我们需要在date里边这块去加上这个cont,然后我默认是零,你看一下。
03:04
在这块。一下。缩小下,你看默认是零,我现在想在子组件里边有两个按钮,是不是按钮我们就得有事件在点击的时候,我们改变这个数量,改变这个数量,那我们看怎么做,那也就是,呃,如果这也能做到,那我们其他的比如鼠标放上去啊,改变附件负类的一些值,然后呢,会通过响应式改变一些状态,那都是同样的一个道理了,那我们将这个数字加加变数量增长,你看一下,那现在我想在子组件里边,也就是这个组件里边。想把数据改变过去,那我们在这个里边需要这块有个消息,消息上边我加一个呃按钮吧,UT to按钮来个加号,就写的很简单的一个,然后呢,呃,CK click点击的时候。这就本身组件里边写的一个识别方式嘛,对不对,那我调用的一个方法,比如说接NG改变数量N随便写的一个方法,那这个方法在哪,在哪定义呢?这是在子组件里边,肯定在子组件里边,我们定义这个方法过来。
04:08
这会加一个methos,这种方法加一个。卡住,卡住nu,改变数量。看一下。这块这个方法称指对不对,然后呢,我们需要改变这个数量,当然我们在这里边可以存存参数对吧,比如改变一改变二对吧,这都可以,那如果是便利的,便利的像这个是便利的,那我可以把便利的值对吧,作为参数IM放里边去也都可以,这里边你放任何的参数都可以,比如说我放一个二进来吧,就是代表的是一个数据啊,当然这里边可以是数组什么的方式都可以。然后呢,我们在这块是不是得接受一个A数据啊,对吧,那我每次让它加就加等于二,我改成三呢,就让它加等于三就可以了,那这块有一个按钮有个加号,但是这两个里边都有加号,你看这两个里边都有加号对不对,因为在组件里边去用了嘛。
05:00
那这里边我不是说要这里边数字架是上面的数字架,所以是在它的副组件上面,在副组线上面呢,我们就需要通过点击的时候肯定会掉这个方法,这是肯定的了,然后接收到这个数字也是肯定的了,对吧,你看点击的时候接收的数字,那我们在这里边就可以通过这次自己里边了,通过这个方法,也就是我们在这里边给大家列出来的EMIT这里边组件里边自带的一个这样的方法,EMIT用它。用这个方法加个括号,这是一个方法啊,这括号第一个参数是触发一个事件,什么事件呢?你叫什么名都行,比如说我叫做啊my con。你看一个EMY就是我的数字事件,那这个事件在哪?你看也就是我们一点击这个按钮的时候,会调用这个方法把数字传进来,对吧,然后呢,它会触发什么。负类的上边的一个事件的一个方法,这个方法。
06:01
是触发一个这个应该说这是一个事件,触发了一个这个事件,然后把这个参数传进来,你传什么都可以。那这个事件在哪呢?那我们就要找它的父类,在它的父类里边,你看。我们在这个按钮里边对吧,这里边儿吧,声明对不对,那我们就在这块加一个,哎,什么事件呢,我的你看我这边自己定义的这个方法,那名称原封不动的。拿过来,原封故动的拿过来,那块写什么名称,这块是什么名称,你看艾特是不是使用是V-O的方式绑定了一个世界,这个世界不是系统里边给我提供的,而是咱们自己写的事件,处罚负类上面声明的这个事件,那处罚负类上面声明这个事件,这个事件里边会加一个什么,会有一个方法,这个方法你叫什么名都行,叫什么名都行,你看比如说我的DEMO。随便写的。也就是我们一点击这个里边的按钮的时候,会触发这个方法,这个方法会通过EMIT的方法会触发一个这个事件,而这个事件就是在附类里边声明的这个事件,那这个事件肯定也会对应方法,但是这个事件是什么?是子类触发的时候才触发的,对不对?通过em MIT触发的事件自己命名的一个事件,对吧?用这个方法,那这个方法在哪呢?
07:15
这个方法自己写叫呃,YDEMO这样的一个方法,这个方法里边需要接收一个数据bata,也就是我们在这块传过来的A,对吧,触发这个事件的时候给谁啊,给这个事件。给上面这个事件对吧,然后这个事件呢,会处罚这个事件呢,同时会把参数传给这个方法,所以在这调用的时候,你不用写括号,你这块直接写括号接收就可以了,接受这个数据,那就是我传过来的二那我只要用这里边的,这次里边的CT对吧?这里边的不就会改变这个数据吗?这这个数据改变我就会改变我们上边的什吧。嗯,哪去了?这个数据负类的。数据我写到。啊,这上面反过了吸烟剂是不是在这儿对吧。
08:03
就会改变它,所以用这个加等于谁啊,每次要加D,我传过来是二,那它就会变成二的数据,那我们来试一下。刷新一下,你看我现在加你看是不是变2468,那我这个可不可以呢。你看这就不可以,虽然这俩组件都有,但是我这个组件里边怎么着没有绑定对吧,这个里边没有绑定,因为我是在这个子组件里边。触触发的事件对吧,是这个,所以呢,只在这个上面绑定了,那如果我想用这个也有效的话,那我同样跟他绑定一个相同的一个事件。这样的话,这个子组件出给,因为子组件是有多个的,父组件只有一个,那多个子组件给父组件传的时候,就要通过这个去绑定,还是没name,你看是一样的,那我们现在刷新一下,你看这块二,我点这个四,点这个六,点这个八。一块呀。这就是我们子组件传给父组件,通常我们都需要通过事件去传递,因为它不像我们父传子请求接口把数据分发下去,在直卷里显示,那只要传给父,通常只要是跟用户交互的时候,发生了什么事的时候,才需要把数据传给副组件。
09:12
你比如说咱们的选项卡对吧,为大家给展示了这个选卡,选项卡里边需要的数据的时候,对吧。就这个式的时候没选项,你看这种子组件里边,当我事情发生的时候,把数据传到附组件,附组件根据选项卡传过来的参数去请求服务器。这个情况才是我们需要的一个情况。所以咱们再回顾一下,当然我们传什么数据都可以啊,这里边有几个细节需要注意的是,在子组件里边需要把数据传出去,一定是在某个事件发生的时候,那事件发生的时候,事件发生的时候你需要传什么数据,就在参数里传给的事件,然后这里边我们再自己定义一个。定一个方法接受我们要传的数据,然后通过这次里边这个方法触发一个自定义的事件。然后把数据传给自定义的事件,而自定义的事件就需要在负组件里边引用我们子组件的地方,引用我们自主件地方,然后加上这个事件监听,那这个时间监听处罚就是子组组件处罚的时候去调用方法,通过方法来调用的,然后呢,执行方法接收有点绕弯,但是也好理解。
10:16
就这么几个步骤就可以了,就可以把子件数据传数件,当然我们传一个对象什么的东西都可以传过来,传任何东西都可以,并不是说只传一个数字,一个字串。你可以传对象,可以传数据都行了,所以我们就是用参数接收这样过程,它内部转换呢,会把对象或者是数组转成串行化,然后帮我们传过来,这边就转过来,就是这样的一个原理,所以我们传什么数据就可以。好,这样的话我们就实现了负组件给子组件传数据,那子组件呢,也能通过事件的方式给负组件传数据,当然了,我们后边会学VS那多个组件,那如果需要一层一层往上传,对吧?副组件有十多层对吧?或者是两个组件之间没有什么太多的关系,比如说我这个组件里边数据如果想传到这个组件里,用这两个,那他需要把数据一层一层传到上面,然后再一层层传下来,对吧?这里边才能用到,如果像这样复杂传递的话,咱们就用状态管理VX就可以了。
11:07
如果就是简单的一层之间,或者顶多两层之间这样子传复,咱们就使用事件的那种方式,Em MIT的方式。如果是多层,又有父传子,又有子传负,这样的方式,咱们就用VX去解决,当然咱们还没学呢,但是学这种方式你也可以传传递了,刚才咱们传一层,那这层上触发的世界,你再往上触罚一个世界,再往上传一层,那也可以逐层的传上去。好,谢谢大家,这节课我们讲到。
我来说两句