00:00
大家好,我是学习园地的特约讲师高若峰,上节课我们学习了组合式API中的生命周期函数,那要知道我们如果用传统的生命周期,那么在传统的生命周期里边是使用不了setup中的,也就是组合API中我们处理的数据,所以呢,我们想在组合API中使用生命周期,那就得用组合API中给我们提供的生命周期的API,那有这么多?呃,如果大家在遇到的时候使用的时候,那记得上上节课,呃,跟大家说的一些语法,比如说啊加这个,然后里边传的是回头方法,那既然是组合API,用的时候一定要引入这么几点需要记住,那这节课我们再来学习一个新的知识点,在组合API中使用provider和inject provider和inject那它又是什么作用呢?它也是实现负向子组件传递数据的,那咱们前面学过传递数据了两种主要的方式了,一种是使用propose这种方式从负元素向子元素传递数据,那也通过事件EMIT的方式。
01:03
可以从子元素将数据传递到啊,将子组件里面数据传递到负组件里边,那又学习了v exx专门是状态管理,对吧?不管是层层传递还是没有父子关系的组件,那我们都可以用v exx来管理数据。都可以用这个来管理数据,那什么情况下还用这两个呢?这两个作用也是从负向后代传递数据的,那有什么区别呢?如果你就是两个组件复合子组件之间传递数据,咱们说用属性传值的方式传递的方式即可解决。如果是所有的组件里边都用到变量,对吧?都用的数据用Vue ex就可以解决,比如说呃,用户登录的Co购物车对吧?文章的收藏等等用Vue ex可以解决对吧。那么如果是负传给后代,不想层层的传递,那这种时候呢,你用provider和呃in,这这个是比较方便的,这种情况啊,也是负向后代存,不管中间跨越多少层,对吧?那如果这种情况你用propose行不行呢?可以,但是呢,比如说你给他传孙子的孙子,假如说有十多层,那你得一层层传进进去,对吧?使用这个也可以解决,那使用VVS呢也可以解决。
02:23
那不光是解决,那么我们在其他组件里也可以用。但是有的时候你遇到这样的情况,就是跟组件或者其中某一个组件和他的后代的组件使用别的组件你不用,那这种情况你再用provider和injt,也是数据传值的一种方式,也是数据传值一种方式。那么。在前辈组件里边,或者是根组件里边,他的前一层组件里边,那我们使用provider来提供变量,提供变量那在子组件或者孙子组件或者孙孙子组件里边,对吧,我们用在注入变量就能使用到对吧,前辈里边提供的变量。就这样的一个呃格式,那我们看一下,如果我们不在组合API中,也就不在setup里边,我们使用provide是怎么传值的,来我们先做一下,然后我们再使用什么,嗯,在在组合API中再使用一下,那我们我们现在同样每做一个新的,我们做一个新的页面,这里边我们做一个新的组件,我们叫做嗯跟吧,嗯root APP跟APP,我们因为我们做呃三代,你四代五代都可以啊,咱就不做太多了,三代这个这里边我写上H1。
03:32
He,这是嗯根呃根组件跟组件,也就是爷爷级的,就叫跟妈啊,就叫干妈,因为咱们有可能很多层对吧。然后呢,在这里边应用了,这个我们需要在路由里边注册一下。注册一下。加过来,那我们这里边就叫做呃路径叫什么呢?既然我们叫呃pro,呃,那就取它的呃三个字母,然后注入呢,In就读in int的一个缩写,那这里边我们使用not这个,这样导入下来,然后我们在呃菜单里边,这里边加上。
04:19
再加上一个复制一个拿过来。拿过来,这里边我们就改一下名,叫做呃,Proin,这是我们写的路径,那这里边我们叫做嗯,Pro vid和什么呢?和inj injt provider和inext使用我们嗯这两个,那我们就在这里标上这两个吧,因为一个是注入对吧,一个是提供一个是注入对吧,这样的一个方式。那我们加这个,我们看一下我们程序里边有没有这个,加不加这个,你看加这了,因为数据比较多,那所以呢,他给我们换行了,对不对,那一点击这个,你看这是跟组件,那我们得做多层我用,嗯,当然它在后台里边都可以注入去引用啊,我只是在这边引入,那其他的组件不是页面级的,那是子间值的,在这里边我们就做一个。
05:06
呃,组件这个咱们就叫做第二层组件,第二层组件我们就呃儿子级的吧,子级的sub组件有了一个sub了是吧,那我们就第二层吧,Two啊Co MP组件这里边我们用一个HR分割一下,然后这里边用H2写上,这是这是第二层组件,第二层组件,然后我们再做一个。Voe再加一个t three,呃,Co Co组件,那这块我们写上用HR分割一下,然后我们用H3,这是呃,孙子组件,孙子组件。好,那这几个组件,这两个组件对吧,我们在副组件里引用,比如说在我们跟组件里边引用一下我们的,呃,第二层组件,那我们import对吧,引入一个叫t wo这个组件,然后我们这里边给注册组件com注册组件了。
06:15
注册是T这个,然后我们在这里边得引用这个组件,这块只是中间一层,在这层里边我们也是可以使用的t w com1层,那在我们的第二层组件里边。第二层组件里边,我们这块再引入一次,然后呢,我们引入是孙子组件组件,那同样我们在这里边得注册一下组件coz,注册一个叫做TH这个组件,然后在这块我们把孙子组件引入起来,第二层我们在引入孙子组件,那就是th ree2cup。这是根组件,这是第二层组件,这是孙子组件对吧,三层一号字体,二号字体,三号字体。就没问题了,加进来了,那现在我们用,如果不用组合API,我们用一下是怎么通过pro provider和inject去传值的,那我们首先从这个地方。
07:09
我们先注入变量对吧,提供变量在这块在使用变量,那注入变量提供变量都可以干嘛呀都可以,嗯,提供任何类型的,找到我们的跟APP在这里边,你看跟他同级。In统计,比如这里边可以有date对吧,然后return返回数据是可以这样的,然后呢,我们在这里边可以使用,你看使用pro provider这个它有两种写法,一种是对象的写法,一种是对象的写法。这样的阶层的格式写法,在这里边声明一个变量,比如说title啊,是ABC啊,这样的一种写法,因为这样写法里边没法用this对不对?那假如说我想访问这里边的数据,比如说T标题。标题啊,这是。这写标题。这是负,嗯,根组件提供的数据,你看。
08:05
这是跟组件提供的数据,在这里的数据,那我想用这个使用上面的就不太好使用了,所以呢,我们不用这种方式,我们用什么呢?我们用另外一种方式,可以是这样的啊,那我们用P跟date用法一样,Pvide括号,然后呢是一个方法,方法我们再返回一个什么,再返回一个对象。这样格式,那我们tle对吧,这样的话,我们就可以让这个等于什么,这次里边的提供的数据因返回的吧,返回的这个对象的格式,返回抬头就相当于我们把这个提供了对不对,然后我们在跟组件里边,这里边我们本身就可以显示一下这样的数据。T,这是来我们看一下。这里边有一个从开头这块里边是返回对象的这个格式,所以这块我们是用逗号隔开的,不是这个啊,你看这是跟组件提供的数据对吧,提供了那根组件提供了数据,那我们想在它的子组件里边可以使用,第三层组件里边也可以使用,那我们直接跳过负组件,在孙子组件里使用,但是这层是可以使用的,它的后代还有很多层都可以使用,那这里边我们就注入这个变量,因为根提供了,得注入到这个组件里边,这个组件里边才能使用。
09:17
注到这里边才能使用,那怎么注入呢?那么就是什么阴。That用这个,那它也是两种格式,跟我们prop声明的是差不多的,对对注入,那比如说我们用数组的格式,它提供了一个注入一个title标题对不对,那我们在这块就使用标题,就使用标题对吧,使用标题,那这个标题在孙子组件里面,我们就可以直接使用tle了标题了,你看。这是跟组件提供的数据是不是绕过了第二层,直接我们就提供了第三层,跟那个PLPPLPS是有一定的区别的,对不对,可以用后代直接使用。那么这个数据能不能显示呢?能不能显示呢?那我们看一下,我们在,呃,在跟组件这里边,我们提供一个。这是第二层啊,第二层我关掉,省能在第二层写对吧,这里边像watch啊这些,呃,这个都不要了,第三层Vue这我们现在也都不要,这些都不用。
10:09
这都不用了,我们就现在提供两个,一个是根对吧,拿过来一个是跟一个是第三层组件,那我们现在在跟组件里边,我们试一下改变一下这个数据,在这个标题,你看我在这个下面。嗯,做一个讲试吧。看改变下边的呃,会不会变化做一个双向绑定,然后呢,V-model v-model。绑定一个什么,这里边儿有一个T定。你看这里边这是一个组件,那我现在在这里边删除数据的时候,你看本身这个组件肯定是可以改掉的,对吧,但是呢,孙子组件给改掉了吗?没有改掉,所以呢,它不是什么,不是响应式的,这是传统提供的,对吧,响应式不了,那我们换另外一种方式,什么方式呢?我们不用这种方式去提供数据了。我们现在用,因为这个是咱们讲不是用组合API的方式提供的方式,对不对,那我们换一种方式,比如说我们在这里边使用一个叫什么叫setup setup通过这种方式,当然了我们对象什么数据都可以去提供的,不一定是一个字符串,你这里面生明个对象也是一样的啊。
11:17
用法是一样的,没有什么区别,那在setup里边,如果我们想在这里边提供数据,比如说我们生一个。呃,Light声明一个标题,T标题。那这个我们就。嗯,这也不用标吧,你不用它了,因为所有的我们都在这里边写,对不对,等于ref里边标题写上,这是呃负,这是跟组件提供。提供的数据,这跟组件提供的数据,然后。嗯,我们这里边想把它首先呢用到了ref,我们必须得在上面所有用到的API,我们是不是得引入啊,Import引入ref,然后from从VE里边把这个API引入进来,这样的话才有这个if对不对,有这个if,那么我们现在看一下,我们还是叫还是叫标题吧。
12:12
然后我们在这个赛纳里用这个,那我们必须得返回去,你看在这个页面里边是不是才能用用上对吧,返回,那返回呢,而且不用看这个警告,因为我们注入的那个孙子组件还没改,对不对,那这里边现在就有他了,然后呢,也有双向绑定了,对吧?那我们刷新一下,这是跟组件提供的数据,我这块给你改一下,数据二给你变化一下,给你组一下题均数据二对不对,那这是通过。这个里边现在我们只是用setup模拟了,就是提供了一下这个数据,那这个数据呢,我们还没有提供给子弹,对不对,如果想提供子弹,我们得用什么,我们也得用prog啊,Provid用它来提供,用它来提供,那么我们看一下提供的时候,我们是不是用到了API啊,用到API就得在这块引入,PI就得引入对吧?那它这里边给我们传的是键值对的方式,可以是普通的一个变量,比如说Le标题把我们的什么值tle把它点没读吧。
13:15
嗯,这里边儿直接看一下,直接写这个应该直接写这就可以。你看我们在这提供的时候,名字直接这个name对吧就可以,或者是对象的话,那你可以是直接把这个对象提供,那我们就直接提供这个内就可以了,直接提供这个,呃,标题见值的这块,我们相当于生明这个变量,这个变量值就是我们这里边生明的变量,明白那这个只是我们在哪个里啊在因为对象里边东西就其他规准定都不用管了,在这里边提供的,然后呢,我们现在在孙子组件里边,那我们不使用这种方式干嘛了,不用这种方式来接受这个数据了,把这个渠道像现在他就没有这块。呃,没有定义啊,因为这块没有这个数据,它是这块提供的那个对不对,又没接收到嘛,那你看我这块里边还是用set啊,这在孙子组件里边用setup对吧,在里边用setup,那么我们这里边想用怎样接受这个变量。
14:13
也就是在这里边用法就是直接通过注入的这个标题返回来,如果它是对象的话,我们就返回对象,如果是变量的话,我们就返回变量,然后把这个变量直接在return回去就可以了,我们界面就可以用了,你看我们这里边let接收一个T标题,就等于通过这里边的什么inject这1CT,那通过这里边接收我们在跟组件里边注入的title头注入的title对不对就可以了,那我们同样用到这个接口了API了,对不对,那我们一样在这块I import导入。这个什么,这个injt,这1FLOW从VE里边,一定从这里边得拿过来才可以,那拿到这个了,如果想用页面用怎么办呢?返回去tle相当于这个从它的附带里边把这个。
15:01
怎么拿过来注入到我们这个setup里边了,注入进来之后,那我们直接返回去,那这个不用这个,那这块就可以使用了,那我们看一下。放心,这回没有错误了,你看这是呃根组件提供的数据,现在在孙子组件里边是不是可以有了,那我们现在看一下这种提供的方式可不可以显示式,我这块把它删掉,你看孙子组件给删掉了啊,有有有对吧,所以这种比我们用组合API使用这种方式,它可以响应式的,而且这种响应式还是可逆的,什么叫可逆的呢?比如说我在这里边我也绑定一个。Input,然后VR model绑定什么呢?绑定T开,你看这里边我在这里边修改,你看副组件的也跟着改变了。所以是完全相式的,是可逆的一个过程,这就是传递数据,用provide和,当然了,我这块只是做了一个什么,做了一个字符串的一个传递,传递一个变量,那如果你传多个变量,那我们一样在这里边对吧?我们可以声明一个,比如说let,声明一个对象OB,呃,是就随便一个obc吧,这里边用呃,Re right re,对吧,用它生为一个对象的格式,这里边比如说名字来一个r monkeyk,然后年龄,对吧。
16:21
这里边随便写一个,比如说写个三,随便写了一个,然后呢,我们需要在这里边是不是得引入什么re啊。这个命经做了,Re,对,然后呢,Two f啊,To re FS,这个我用一下。你看这块引入这两个,那么我们在这里边用的时候,生明这对象,这个对象我们想让里边值返回去,是不是我们用扩展的这个方式对不对?To I FS,这里边OJ这样的话就可以了,对吧,这样就可以了,那我现在想这个对象输入这个对象,那我这块再来一个pvid,你那假如说这块我们叫user。
17:03
注入的名我们就和我们这个电量写不一样,我们这块叫obj。然后呢,这块是提供的变量user OB,那我们在注入这块我们使用在孙子这里面使用,那我们就可以用什么light,嗯,User等于怎么呢?In det这里边使用K的值是user里边我们注入的K对应的是obg嘛,直接把user拿过来,然后我们把这个user直接提供。直接提供这样的话,我们在这个里边用的时候。用的时候你看这块标题我们换一个行吧,这块直接我们来一个user.name和。user.h。咱是双层打括号插值的方式,比双层打括号右侧点A。你看LK3就可以了,那也是小应式的,你如果去修改对象里的值,那这边也会跟这变。这就是我们这节课给大家讲的,在API中使用provider和int。
18:03
这样的一个用法,那语法也给大家提供了,这是原始的使用方式,这是提供变量,这个呢用法是使用变量啊,例子呢也在这块,咱们就改了一个跟组件和一个孙子组件,绕过副组件,但是在副组件里边,如果你直接用这些数据也是可以的,副组件里边直接用也是可以的。你带有组件再用也是可以的,就给大家吃了。只要是存在这种父子关系的,对吧,我们在边上的船在所有组件里边都可以去使用。啊,谢谢大家,这节课我们就讲到这里。
我来说两句