00:00
下面我们来介绍组件间通信。组机件通信的意思呢,就是指的是我们两个组件之间,他们之间交换数据,比如说父组件给子组件数据,然后子组件呢来修改父子界数据。所以下面我们就来学习这些用法。父组界给子组件传递数据呢,用的方式是pro。子组件给父组件修改数据,用的是自定义事件。啊,那么传数据的话呢,就是给子组件直接使用,修改数据的话,就是为了子组件可以直接去操作父组件的数据。好了,那么接下来我们就来一起尝试一下。打开代码,在下面新建一个代码七。我们在这里面去写上我们想要的代码。好,7ARE。OK,那么我们在这里写一个小的功能。
01:02
我们呢,定义那个数据讲number。是外的。但是这个number数据呢,我们希望交给子组件去显示。那么我们来看怎么做啊。保证的第一个text标签啊,代表的是副组件M7。然后呢,我再定一个子组件,子组件的名字可以随便取,那么我们为了形象一点,我就叫chard对吧,就是孩子啊,叫差好了,这就是我们的子组件。样式什么的都不需要啊,只需要一个文本内容。代表它是个自件差的。好,那么接下来呢,我们就在DEMO7中把这个子组件引入并使用。组建只要引入就可以直接使用了,不需要注册啊,这里大家需要注意。好,我们来使用,那么这就是使用这个自键。所以此时呢,我们页面就会渲染出DEMO7,还有这个相应的内容。
02:04
OK,那么我们呢,可以在我们的手机设备上进行预览。对七保存啊,然后右键增量同步。好,呃,那么这里还没有扫扫码,我们要重新扫一次码。来调用你的手机扫描这个二维码,对吧,然后扫描二维码之后呢,他们就会在同一个网络下好了,我们再试一下,刚刚没扫上。打手机扫一扫,扫描二维码,让你的手机和咱们电脑处于同一个网络下,好,然后呢,点击这个就可以同步了,下面我们来看效果,诶这时候就渲染了啊,DAMON7和child都在这。好,接下来呢,我想将这个number数据交给child进行显示,那我们来看怎么做啊,我们需要将number数据给child,就是通过标签属性的方式传递参数。
03:09
对吧,这就是。一以标签属性的方式传递数据。好,但是你这样传的话呢,传的是个字符串number,我们实际想传data里面的number的值,所以这个数据得是个动态的,那么动态数据的写法呢,你要么用数据绑定的花括号,要么就要用V杠带的语法,那么这样传递的数据才会是一个真正的这个零。所以这里要特别注意啊,很多同学在第一次用这个pro语法通信的时候呢,他老是忘记加这个冒号,导致通信的数据是不是我们合合理的一个数据。好了,那么这个时候呢,代表我们父组件,父组件就是代七给子组件就是child的传递了一个number,数据值是零。来到的组件里面啊,叉组件里面,他要做的就是声明接收。
04:11
它需要声明接收它传递的属性,Pros是一个对象,在对象里面,我们传的属性名叫什么,你声明接收的属性名就叫什么,然后呢,并且要给他一个类型,一个准确的类型。它是字符串就是啊,它是number就是number,它是字符串就写string,是board就是boarding啊,以此类推,要给他一个准确的数据类型,注意是大写的number类型啊。好,那么这样呢,就声名接收了,声名接收之后呢,在我们的这个页面就可以直接使用,那么一旦实名接收啊,就是通过this直接访问这个number数据,所以我们上面访问的时候就可以直接写啊,直接写访访问number就好了。好了,那么这个呢,就是使用啊。
05:01
我们再来回顾一下整个流程,无非就是副组件以标签属性的方式给直接传递数据啊,注意传的数据可以是多个,我想传几个就传几个啊,可以一直传。一受啊,它是个布尔值对吧,我们想传几个就传几个。对吧,我现在再传一个,那么对于子组机来讲呢,它都要声明接收,对吧,你想用的数据都需要声明接收,它是布尔值,我们就写玻璃。然后呢,你想在哪里显示就在哪里显示啊,用法呢还是一样的。就这个。所以说呃,我们的最终操作呢,就是这样的,副组机给子组件,在子组件标签上以标签属性的方式传递数据。准组件呢,要声明接收,然后再去使用。而且在传递数据的时候,记得要用V杠半语法。好,下面我们来增量B看效果。
06:01
大家看下面是不是出现了个零,好,但是布尔值呢,没有渲染啊,因为布尔值没法在页面中渲染,所以说这个布尔值呢,它是不好展示的,但是我们可以结合一个指令去使用啊,对吧?V干show啊,我们决定它到底要显示还是要隐藏,可以给他一个me干受的指令啊,当然V干if也可以啊。因为它是直是数,所以它显示了,如果我们调为值为false,它自然就不显示。好了啊,那么这一个呢,就是咱们的这个pro语法整体呢,并不复杂啊,就三个步骤,以标记属性传递数据,那么子组件声明接收,那么即可通过这次直接使用。好了,第一个呢,这种方案我们叫父组件给子组件传递参数,好这个时候呢,我们又有个需求了,我子组件呢有一个按钮,我希望点击按钮的时候,这个number的值发生变化,加加是不是。好,这个时候就是子组件修改父组件的number数据了,这时候大家一定要切记一个原理啊。
07:01
咱们数据呢是只读的,不能直接修改。来这里还是熟悉一下啊。不能直接修改对吧,要想修改。需要。就是要想修改,那么就是数据源在哪,就要定义。更新数据的方法就定义在哪。然后呢,通过再传递方式,再传给这个子母界再去使用。就是个所以数据源这样的更新数据的方法就可以定义在哪里。那么我们回到这个DEMO7这里啊,我们想要修改数据的话,那么其实就要在这里。数据源在哪,更新数据的方法就应该定在哪,数据源在这个咱们代码七这个组件,所以更新的方法就应该在这个代码七组件中啊,这里面来调用方法的时候,我们在G时点点点number加加。
08:11
对吧,所以只要这个方法一定用,那么咱们的数量就是加加。好,那么此时呢,我们去给子组件通信啊,就有两种方式,我们分别演示一下,第一种还是以这种方式,我们除了能传数据以外,我们还可以传一个方法给自主键。我们传了一个方法给资金,对吧?S number,那么在子组件内部呢,它需要。声明接收这个方法,当然它的类型是函数,所以是方程对吧,然后呢,我们可以整一个按钮。按钮的话呢,点击我们去更新。那这里呢,我们叫update。好了,那么update里面因为我们定义了这个方法,所以说直接c.set number调用就好了,调用这个方法呢,实际上调的是副组接的这个set number,那么方法的定义在副组件,所以它的这指向指向的是副组接的实对项,所以它修改的数据是副组接的number数据,最终达到这个需求的。
09:17
我们把一个更新数据的方法通过pro方式传递给子组件,子组件声命接收就可以调用,这样就可以达到这个更新的效果。我们增加一下。嗯,我们来看一下增量编译哪里出了问题。That number is no定义我们来看一下哪啊,这时候我们要传递函数数据的时候要注意啊,要加个this,你绑定事件不用加this啊,但是传递数据的时候需要加this,这是一个小的问题啊。绑定动绑定事件的时候,回调函数会自动去method中找,对吧。
10:00
或者说这次这次点长。这是这个,那么但是如果是绑定属性的话。绑定属性对吧,其实就是绑定一个函数一个方法。那么它就它会自动的去data里面找。他会去data里面找,但是data里面有这个数据啊,所以此时需要加this。我们只要知道就是除了data数据要自data去访问是最好的,剩下所有数据定义好的数据都是通过this可以直接访问。都是要加this啊,所以这里要加个this,这一点要特别注意一下。那么其他正常data数,其他正常数据呢,都是直接访问,但是函数数据得加个。来,我们自料。好,此时OK了,我们点击更新按钮。点点点,你看数据就发生了变化,是不是就发生变化了,这是可以的啊。好了,这是第一种方式啊,就是用的还是我们pro方式来做的更新。
11:04
在数据源在哪,更新数据的方法就定在哪,定义好方法传给需要用的子组件,子组件声明接收之后就可以调用了。好,然后呢,这里除了这种方式以外呢,还有一种方式,还有一种方式啊,那么叫绑定事件的方式。来我们呢,绑定的一个事件注意。艾德福不就把定世界吗?但是我们把那个世界叫number,是不是叫做set number?好了,那么这个世界呢,它明显不是一个传统的动物世界,是我们定义的一个自定义世界,对吧,这是叫自定义世界,那么自己定义的事件呢,我们想要触发怎么办呢?首先自组件内部呢,就不需要接收了,因为事件不是属性,它不需要接收,这才是属性,属性要接收,但是艾特浮板你的世界世界是不要接收的。那世界不接受怎么触发呢?通过这4.fire去触发,那么fire尔的第一个参数就是我们要触发的世界迷。
12:18
我们来看一下效果,看效果更新。好,更新之后呢,他就说that number,呃,找不到,我们看哪里用了。The number找不到,我们看咱七这里是不是用了3NUMBER。哦,他说这个啊,因为这里是把定的事件啊,所以说不要加this啊,法定事件呢,不需要加this,但是普通函数需要加this,我们再来一次。好,这时候呢,就没有问题了,我们点击更新,大家看数据也能发生变化啊,数据也可以发生变化,所以说就是咱们的这个更新的方式呢,有两种啊,更新数据的方式有两种,子组件更新父组件有两种,第一种是直接传个函数过去,子组件声命接收,然后调用,那么这里要注意传,如果以pro方式传函数数据的话,一定要加this才能找到。
13:09
第二的方式呢,是绑定世界。对吧,把定事件的方式,那么子组件通过这个反射方法就会触发事件,从而啊达到这个效果的,这也行。这也行,法定世界呢,除了这个艾特福以外呢,当然还可以用最传统的这个own板钉也行啊。哦。那么我们on绑定的也试一下,也看看行不行对吧。点击更新它是不是也能发生变化,是不是也OK啊,但是我们说了啊,推荐大家使用艾特服绑定的形式。好了,那么这种呢,叫做自定义世界,自定义世界。那么自定义事件呢,是可以传递参数的,我们来传递啊,比方说我每次我不希望加一,我希望加二,我传个二,一旦传到参数呢,那么在这里就能接收到我们要加的这个值,哎,这时候我number呢,就加等于这个number。
14:04
加点这个值,好,这个时候我们再更新啊,那么它每次加的就不是一了,加的就是二了。啊,这时候我们要看一下这个number数据呢,它传过来的这个对象啊,对象里面才会有我们想要的这个啊,这个number数据,我们来打印一下这个对象apid。打印一下这个对象,我们来看一下这个对象里面长什么样子啊,一起来看一下。正点更新。点击更新好打印出来了啊,它传的数据呢叫detail,所以是二啊是detail式,那么这个参数呢,我们还是叫一叫1EVENT啊,所以最终呢,我们要叫1.detail里面的这个number啊,1.detail里面的number。好,我们再试试。传递的数据呢,要通过一点获取,点击更新。呃,它说明说明这个number应该是一个字符串类型啊,所以它加起来就会出来一个这样的问题,我们呢,加一个啊1.detail啊,不是number1.detail的值就是它。
15:10
刚刚我们应该看错了,那我们点击,诶这时候就加热了,加热了。好了啊,这个就是我们的这个自定义世界,我们一起来总结一下。我们呢,这是叫组件间通信。对吧,一起来回顾一下,总共主机通信呢分为两部分,副主接。给子组件传递数据。第二部分的是子组件。修改副组件数据。好啊,第一部分呢,它是传递数据的话呢,它它就一种方案就是pro。好,第二种算法呢,它有两种方案,一种是pop方式。对吧,一种是我们的自定义事件的方式都行。
16:02
那么开发中的没有说一定要用哪种,但是一般来讲还是建议用自定义事件啊。第一种方案呢,它的用法无非就是第一个怎么传递数据。标签属性的方式传递数据。那么子组件声明接受对吧,然后子组件使用。好,整个流程就是这样的,就是我们给他给这个组件讲的就是这样的传递这个数据。对吧,然后直接实名接收,在子组件内部,通过pro去实名接收咱们的叉叉以及它相应的类型。接收好之后呢,直接就通过Z点叉叉去使用,如果在模板页面中就直接叉叉使用就好了。好,下面呢是子组件修改父组件的数据啊,有两种方案pro方案,Pro方案呢就是一样的。
17:03
首先,副组件定义更新数据的方法。然后呢,以pro方式。传递给自己。好呃,所以这里呢,定义方法的过程呢,我们就不写了,就是大概就传一个方法,那么自介生命接收自接使用,就这样的。那么直接生命介绍呢,它必然是一个方式类型,因为是个函数嘛,那么直接使用的话呢,就是这点叉叉去使用。好,自定义事件呢,其实我们更推荐是这种啊,那么父组件啊跟定义更新数学方法,然后呢。绑定事件的方式。然后呢,第一个是,然后给自建绑定自定义事件。
18:10
那么绑定事件呢,我们这里就主要给大家写一种方法了啊,主要是这个艾特福的写法,把它定好事件之后呢,自界并不需要接收,自界可以直接使用。直接使用就是子件触发事件。那么就这一次点。对吧,然后这里是事件名称。然事件的参数。这两个参数啊,好,然后呢,这里回调在负子间通过一点。获取。
19:03
好了啊,所以这就是我们整个的这个通信的流程,那么开发的时候呢,这种通信的方式呢,还是比较常见的,所以大家一定要清楚通信的方案。
我来说两句