00:00
大家好,我是学习园地的特约讲师高国峰,上节课我们了解了组件化的开发思想,那将我们一个页面划分成很多个组件,那组件之间呢,形成了这样的一个树状的结构,有根组件,有一层组件,有二层组件,也就是父子组件这样的一个划分。那这节课呢,我们再来学习一下组件之间的通信,也是我们学习组件非常重要的一个技术点。那我说了,为什么组件之间需要通信。因为。组件划分分为负组件和子组件,那组件之间是不能够互相访问数据的,默认是不能的,虽然它有这样的树状结构,就比如说在我们程序里面,你看啊。比如说我们划分这么多层,对外层APP是跟组件,然后呢是这个区域对吧,主区域,然后侧边栏,那再加上内容区域和这个区域有这么多组件,那比如说我在单组件里边,Date里边有一个数据,比如说我们在这里边我们加一个消息MSG。一个消息,这里边写着这是APP的。
01:04
数据mes msg,随便的一个字符串,那这个字符串如果我们在本身的这个组件里边显示是肯定是没问题的,比如说你在任何地方显示都可以啊,用到这个数据,这是本身组件里边,用到我们data里边数据是没问题的,但是我如果在它的子组件里边,比如说。嗯,这个是主区域在这里边,如果在这里边我们使用MSG,你看直接使将就想使用副组件里边数据,你看下边提示了MSG怎么着。没有定义对吧,没有定义这个实例,它在什么APP里边,也就是在我们这个子组件里边用不了这个数据,那这个子组件里边只能访问自己里边默认什么这里边的的数据点只能访问这里边的。你看如果这里边加个MSG,这是没问题的啊,这里边的MSG。那这是my man中的数据MSG。
02:00
当然,我这块少写了一个什么,少写了一个逗号。你看MSG啊,这块忘写什么,这写错了这些。这已经有理。太大。你看这是主区里边这个数据,这是没问题的,也就是。自己里边生命对的是可以的。但是呢,我们有的时候还需要什么,父子组件中间这一个通信,有的时候需要父组件向子组件通信,有的时候需要子组件向父组件之间通信。那我说。不能访问,那为什么还需要通信呢?假如说我们做的是一个这样的一个页面。就比如说这个页面看一下。那咱们每做一个项目的时候呢,有可能用到了几十个上百个组件。那如果不通信的话,那每个组件都有可能访问服务器接口中的数据,有这样的情况。对吧,这些数据有可能都是从接口里边过来的,这数据都是,特别是这边都是从接口里边请求过来的。那如果每个。几每个组件里边自己去通过网络请求,请求服务器跟接口,把数据拿过来摆放在页面有没有问题呢?没问题,但是你想象一下,有几百个组件的话,每个组件都去请求服务器,那请求的次数是不是过多呀?过多就造成什么网络压力大,页面请求缓慢,会有这样的情况。所以我们正确的做法是什么呢?是在我们的跟组件里边,你就最上层组件一次性把数据全取过来,你就在顶层对吧?或者是中间你分成三大块儿,我们在每个块里边取过来也行。
03:25
然后把数据传到子模块里面去用。是这样的一个情况。就比如说。你看假如说我们这个栏目是一个便历的,对不对,每个组件里边没有数据,没有任何数据对吧,那我们从这跟组件里边把这个数据取出来,然后我们遍历四次,这这三次啊,就变利三两次,这两次就变利两次,对吧,那便两次,然后呢,便利标题变利内容是这样传到自己卷里边的,所以呢,从外层跟。父组件、子组件,这样的传递方式属于父传子。那我们看一下。父子组件之间不能够相互访问这些内容,所以呢,父组件如果存子组件就需要使用。
04:04
呃,Box pro props属性的意思,那子组件。如果想把数据传给副组件,那需要通过世界,那么这节课呢,咱们先来完成一层从父组件将数据传给子组件这样的一个过程。那刚才看到了,在这个里边根组件里边将数据MIG,那放到我们这个主区里边没有传过来,那怎么能把数据传过来,那我们说了用一个方式。首先。好一会啊,首先我们需要在接收数据的这个组件里边接收数据,这个组件里边,那我这个是接收这个数据的,用这数据对不对,那这现在访问的是自己里的数据,那假如说我这个里边先不没有写数据里边什么都没有对吧?什么都没有,那这个数据肯定就是。出错的。对吧,你看下边出错了,告诉我没有这个数据,那没有这个数据,我想让他有这个数据能使用到怎么办呢?你看我们可以生命date,可以注册组件对吧,可以有计算属性等等,我们前面说过的方法,那你也可以加一个这个方法就是。
05:03
Prop PPS加这个,那它的值是什么呢?它的值是对象。指数组对吧,咱们分别来看一下,咱们用数组,当然这个之间得有多少个K啊,那如果我这里边传一个,那接收这个值,接受mst这个值对不对,那我在这里边就写个MSG接受这个值。你看。他就就告诉我一个警告对不对,虽然我加了这一个MSG这个值。对吧,这个值那它是属性,这个呢,就得必须得从哪传过去呢,从它的上级负层传过来,有这么一个属性。那怎么传过来,你看我们用的地方在哪呢?是在这个地方用上了,对不对,这里面我们传播属性,我们传的叫MSG等于。你看假如说我传一个哈。传一个哈,这是我们传的内容啊,那我们刷新你看。对方接到了是哈,也就是我写上这个属性里边显示什么字符串,那我这块就显示什么字符串。
06:00
对吧。记得属性用的时候,我们先在这里边接收,然后mst,那这里边不管怎么用,这个mst就和我们这里边声明的mst用法是一样的。用法是一样的,那在别的地方方法里操作,比如这里边有个me hods,这里边操作的时候。你看也是一样,这是点MSG。可不可以呢?当然这里边得写,得写一个方法,比如说ad的方法,或者是显示的一个方法。解释一个方法,那这里边随便做的一个方法啊,你比如说这次里边的MSG,我从服务器传过来这个数据,那我将这个数据呃连接上,这次里边的MSG就像两个。两个连接,然后我们嗯返回它,但是这个方法我们看在哪里边调用,那我这块来调用一下吧。MSG是。这块是调用这个方法叫什么方法呢?受方法。
07:00
嗯,数方法。我们一起这有一个re t有一个防止,我试一下啊,在这掉一下,哎,瘦。你看哈哈,这就可以了,所以呢。这里边传过来的这个相当于属性的变量,也就是我们在它的上一层声明的这个变量,因为这个是指定的属性名称,指定的属性名称那就在我们用的时候,在我们用的时候就相当于访问data里边的这个数据一样,你看我们在方法里边,如果这里边声明一个V。声明一个,比如说MS对吧,等于。这是那个接层阶层多少不能用等号,等于你比方说w or LD word生命word,你看我这里边这次里边的哈,这是哈,全部是hello对不对,那我这块MSG你确认一下,这不是hello word吗?你看反而这是属性传过来的,属性,属性里边也是内容,那这个是本身data里数据,这两是一样的,这点大家要清楚,也就是从属性传过来的,和date里边声明几乎是一样的。
08:01
用法在子组件的用法几乎是一样的,这里给大家只是举了一个例子,是一样的,那么。我们现在传过来这个属性是从这儿传过来的,但是属性里边我们很少直接这么传字符串,对吧,那如果不直接传字符串,那我们怎么办呢。假如说我这里边儿在接受一个。嗯,你看我如果接收多个在子组件里边。这个起到这个。现在这个。把这几个都关掉,省得我们写的时候容容易乱。啊。明断。我们在这里边你看啊,MSGMSG这里边我们再接收一个,既然是字符串的,我们再接收一个变量,比如说叫做art标题吧,Tle接收一个标题,这接收一个标题,那么我们在这里边是不是传递的时候呢,就要加一个title标题对吧。标题。这是title标题对吧,转过来,那这个属性我们在这里边是不是没用上啊,如果我现在想在这块用上一个标题,比如说这里边写上用上T。
09:05
你看这是一个标题,是不是就有这个值了,可以传过来,可以传多个,但是有的时候我们需要。这个是个变量,是变量怎么办呢?那我们就得绑定这个变量,用微杠放,那用语法,它的写法就是冒号这个方式,那里边再写这个它就不是字符串了,我现在你看一下信就就报错了,对不对,因为你绑定的方式里边是不是就变量了,那这个变量可以是这个组件副组件传过来的属性,也可以是本身里边data里边是不是有个MSG。你看这里边,你看是不是APP的date的MSG,是不是把标题这个通过这个属性就给我们传过去了,所以呢,我们不加。冒号的方式,不绑定的方式,我们就是这样去算。对吧,加括号的话,我们传的就是变量,跟我们原来的语法用起来都是一样的,那这只是传字符串。那我们能不能传数组呢?那如果这里边,比如说我们在里边返回的有一个数组,或者是一个对象,假如说我就是一个数组吧,比如说是呃,文章AR。
10:03
A文章咱们就是AR。一个文章吧,一个数组,那假如说这里边我们就是数组的多个标题吧,一行一。一行二,当然是对象也没关系,也可以啊,一行三你就写三个。看13个。如果这个属性,那么我们想把这个文章多个文章传过去,如果我在这块写上。啊。冒号AR t Le,我看我这会这个文章,这个属性我随便定调A,如果等于ART是不是把我们date里边生命的数字,当然这个数据有可能是从接口里面请求过来的,那么付给我这个对吧?那我们现在如果还按以前的方式接收,也就是在这里边,如果我还按这个方式去接收的话,怎么接收呢?那我这里边。啊,接收什么接收。A,你看,如果我这么接受会什么样呢?
11:01
我现在使用一下,看一下它是数组还是变量,你看A。拿过来了,你看这值它当成一个字符串,并没有告诉我们这是一个数组,对吧,所以呢,我们现在便历也变历不了,那我想遍历数组中每一个值。或者是这个对象里边的每一个值怎么办呢?那我们需要在这个地方,你看我直接在这个地方,这样行不行。加上一个对象,把它敲开。啊。这样我们敲开。走开。然后这个地方。这样吧。变成一个对象。对吧。然后呢,我们前边名称是A。名称是这个就介绍过来了,然后呢,里边的值我加一个type,因为它是既然是对这里边是对象的方式了,那我们。你看。这样加线条是加不了的,所以呢,我们这里如果做加这个的话,那我们这块也得加什么。
12:02
也得加这个外层也得是对象的方式,所以呢,才能让里边是对象的方式。要里边是这样的方式。然后我们这里边可以指定类型是ARA数组类型的,那说可以指定多少个类型呢?很多种类型都可以。什么类型都可以,那我们试一下这样可不可以?你看这是对象类型的,这里边儿这个就OK了,那我们这会儿就加一个。这个名称你看直接加这个对象属性名和值一样的。那加这个对象属性名一样的,你看这里边儿又不行了,对吧,所以呢,我们一旦加对象的形式,那我们这里边就得干嘛呀,里边所有的都要什么使用这个对象的形式,先把这俩先去掉吧。你那上面那个是没有定义的,你看这块访问的这个。直接过来的,现在是一个呃速度,那我们这块指定的类型这块也是速度,那如果上边这样。
13:01
都写全点吧,MSG有一个MSG,它的类型T是S字串类型的,字串类型的,然后再有一个呃,Tle标题,其实还有标题对吧,咱们来一个类型是字符串类型的。那这块底下括号隔开啊。你看hello,跟原来这个值是一样的了,那这样的话,我们把这个文章标记的就是一个数组类型的,数组类型的,那我们这回就在这块就可以遍历这里边的值,比如说我们这边来一个派标签这块来一个负。微杠杠。For等于,那这里边就可以是A遍历这个文章in,然后it对吧,这里边itit就是每一个选项。嗯,这个得用什么差值。用差值的话,它就显示的是这个字串对不对,用差值。来123。就可以了。这是我们如果变成。
14:02
可以有一种默认的是数组的格式,我把它注释掉,注释一下啊,就是冒号默认这里边就指定属性名,那你。内二,内二这样的一个结构,当然了你可以有很多个,那如果想指定类型就这样,当然也不光是单纯的一个类型。这里边儿,那这里边还可以指指定什么呢?还有几个还可以指定缺省值,比如说MSG,如果我不传它的话。你看这块啊,如果不存在的话,这块因为里边是接线格式,那我还可以使用de缺省值DEF。提示了def u LT直接写吧,缺省值,假如说mi,如果我不存这个属性的话,不存这个属性的话,那我们直接可以找这个属性里边话,按自符串使用,给一个取整值,取整值呢,这是一个。呃,印象没下,你能看得清楚下井号吧?银行井号,那这样的话,我们声明在这个里边MSG,然后呢,给他缺省值,就相当于我们直接在这里边声明的MSG是一样的,只不过有一个问题是什么呢?我们在这块。
15:10
使用的时候,如果使用也就是在这个传的地方,如果传过来这个值了。这个这个。你看如果传过来,几乎传过位置,如果没传过来,你看就是井号。是不是相当于在这里边我加上缺省值,通过属性MG自动串联加缺省值,那这个MG声明是不是和我这里边声明是一个意思。对吧。就传属性也可以,但是它的功能比data里边要强在哪呢?你不传任何值的话,他用选生值,如果你存任何值了。你看哈。那么我们确认值就没有,确认值就变成这个。这是缺省值的一个问题,也就是我们在这里边使用的时候,不光是只指定一个类型区分数组、对象,字符串,还有数字指定类型,那还有一个缺省值,加上缺省值就跟下边你在date里边生明的感觉是一样的了。
16:04
对吧,但是多了一个什么呢?你只要使用这个属性,那就会把这个缺省值给覆盖掉。那除了确认值,那我们你比如说拍到这里边啊,再加字这成一字串,这里边也可以写确认值啊,确认标题,那我们还有一个属性什么呢。叫做re re。我忘记了。嗯。Re q,加这个,比如说加个true什么意思,就告诉我们这个值属性值是必传的。也就是告诉负傅雷,你不如果就是它的副组件,如果不传这个属性,那么我就给你报错,你看吧,我们现在传了,看上去是没有任何问题对吧,加上这个和秘加是一样的,那现在我在附的属性里边,如果我们不传这个属性,你看。标记一下就给给我们怎么的报错对吧,警告告诉我们这个是没有定义,必须得传这个属性。所以呢,我们就必须得传上这个属性,当然这个报错还不是他是一个警告啊。
17:08
警报。我看一下这个词写没写错。Re e qqu I啊,应该是没错标题,那我们这块加这个标题就可以了。也就是我们在传属性的时候,一定就是在设置的时候,可以通过它来设置,我们是必须传这样的一个情况才可以。离传就是告诉我们必须强制使用这个属性,没有这个不行,当然这个和这个抵扣他俩是一个相当于互斥的关系,你比如这块你要必须传的话,你干嘛写确认值啊,那肯定用传过来的那个属性的值对不对?所以这两个一般的不在一起使用,单独使用,通常我们这个也不限制,这个用的不多,确认值用的比较多,这个用的不多。啊,但是知道这样的情况,那数组里边这块我们能不能用上缺省值呢?你看啊,假如他们用deu default缺省值,我们来一个空数组。如果我们不存的时候,给个空数组行不行呢?那我们在这个地方,比如说假如说我们不存这个值,给一个空数组。
18:07
来刷新一下。你看是啊。没问题的,看不看不出来对不对,那如果我们传的时候,或者说我们给一个默认值,默认的数组在这里边缺省值,你传个。AA。BB。嘻嘻,这样去穿。你看AABCC这个是,呃,V3里边给我们改进了一下,那在V2里边,如果我们缺省值是不能这么传的,我们缺省值必须得是before加个括号,然后这里边return这样的方式去传导,那在V3里边呢,是允许我们怎么办这样去传缺省值。和上面是一样的,就是跟我们类型是相对应的。那对象啊,或者什么确认值,生命方式也都是类似的,也就不传递给我们使用确认值,如果我们传递了,也就是在我们这块,如果我们退回来传递了我们值就是用传递的值,不传递就用我们确认值。
19:01
这是一种情况,所以呢,我们在生命属性的时候,负类给子类存是这样的。那还有没有另外的一种方法?什么方法呢?当然属性就这几个就就够了啊,给类型给确认值,然后呢,是不是必传的这几个。就OK了,也不需要太多。那么再有一个,如果属性名,我们这里边假如说我们生一个啊。就拿这个为例吧。抬头为例,你比如说块写上MY。开头。我变成大写的。变成大写的保存一下。然后呢,我们在传递的时候。在这块我能不能这样。买。抬头。你看一下下边这块有一个什么,刷新一下。我再保存一下,然后刷新一下,你看一下。这里边儿没有传过来,因为抬头这里边写的是什么。嗯,的一个mi。MG,这是这个数据,你看这里面没有显示这个数据,对不对,APP的数据没有传过来。
20:03
那没有传过来是因为我这里边接收的问题吗?你看我传过来title,那我这用的时候。用的时候属性名这块我得改成什么。YT开头。你看。有的数据吗?这块这是PB数据,这是可以的,对吧,那看另外一种方式,但是呢。啊,这个错误信息应该是应该是这块的啊,你看这成为了,那我有没有另外一种方式,你看我们在使用标签的时候,都可以用这种非拖方式的,非托峰式的,那我们在这地方能不能将这个变量改成什么,变成小写杠线那种连接式试呢?比如说麦抬头来听一下。一下。你看这块船。MSG,然后这块没有这个数据你看啊。STEM。这块my title传过来的一个属性,然后我们在这块使用这个对吧。
21:06
抬头。变量下边有一个错误提示。看到了不行了,所以呢,属性你就记着怎么声明的,这边就用什么格式就行了,这块跟V2也不一样,V2呢是只允许使用这种当线的,不允许使用波峰式的,那这咱V3里边这些东西呢,你看也就是我们记住一点,这里边儿怎么声明的。属性,那我们在这个地方。就怎么使用。但提示我你看它提示的是这个工具提示的还是使用这个,但是提示这个呢,这边又无效果对吧,那我们只用。Right。把变一下。My title。你看这就没问题了,下边有没有错误一下。你看工具提示还可以线。对吧,但是这钢线里边就不能用,所以你就记住一个原则,别管它支不支持,因为这版本之间是有差异的,别管它支不支持,你就记着我这块是怎么声明的,对吧?让我们传什么属性,那我们在父子这就传什么属性就OK了,就这么去做就行了。
22:11
那从这个里边的属性,比如说我们从APP里边把我们的。看一下啊,这个文章传到了我们的这个组件里边来,我们声明的一个数对不对,那我能不能再把这个文章再往下传呢?比如说传到我们这个内容属性里边来,在内容里边属性也就是我这么算,再算一下,你看啊,冒号arle文章等于A,那这个文章就是我们通过属性接收的。接收的这个文章是一个速度,对不对,那我们现在想把它传到我们子组件里边,也就是这个组件里面。在这个组件里边,如果我想接收这个属性的话,那我这块就必须再写什么。接收。对象的方式,然后呢,这里边写上AR在接收,让我们这个赋比这再存这个属性一下类型。是,呃,数组的A2A当然不用确认值了,这里就不用确认值了。
23:05
如果我们想从第二级组件把数据接过来,再往下传,那我们同样在接收的地方,你还得全部属性,但是属性名叫什么都可以,对不对,你最好是一样的,就是从库里传过来的,那我们在这里边。这块我们再来个换行,第二这块我们来一个。标签因为是数组V2电力it。没发错本号啊itin。然后用差值加进去。这里边ATM。你看数是这么多了,所以我先最外层里边把数据改过来,比如说从接口请求的,你看这比如说数据太长了,对吧,我们只要在外层里边把数据一变化。数据变化。那里程的数据就都变化,所以在根里边传的组件,我们传到它的第二层可以用,第二层还可以往第三层里传,对吧,那传递的时候呢,我们在每一层里边用的时候。
24:00
接收。属性你可以生多个,就用这种对象来进行生命,这种用法也是咱们用的最多的啊,数组呢用的相对少。然后如果。只是加属性,如果想绑定变量的话,一定用绑定的方式,这样你如果不绑定的话,直接传它就是一个字块,如果想在卡变成变量前面加个冒号,里面就是一个变量。这样的情况,然后注意驼峰命名的方法,那就是呃,子组件要求存什么属性,那副组件就传什么属性,就记住这一个原则就行了。这方。对吧。啊,谢谢大家,这节课我们就讲到这里,这节课我们讲了负组件向子组件直接通信传递数据使用来完成了,那下节课我们再学习子组件向组件传递数据,好,谢谢大家。
我来说两句