(尚硅谷)Vue笔记-------37

provide与inject

(尚硅谷)Vue笔记-------37_第1张图片

(尚硅谷)Vue笔记-------37_第2张图片 

(尚硅谷)Vue笔记-------37_第3张图片 

(尚硅谷)Vue笔记-------37_第4张图片 

现在我们每个组件都是一个颜色背景,所以我们现在想做一个套娃的效果:

我们在父组件中引用子组件:

(尚硅谷)Vue笔记-------37_第5张图片 

然后同理我们在子组件中去引用孙组件:

(尚硅谷)Vue笔记-------37_第6张图片 

我们先来看看我们的页面是什么样的:

 (尚硅谷)Vue笔记-------37_第7张图片

我们现在想做的是父组件中的数据向孙组件中进行这样的隔代传值的功能。

首先我们先给父组件加上数据:

(尚硅谷)Vue笔记-------37_第8张图片

(尚硅谷)Vue笔记-------37_第9张图片 

我们传数据就用provide。我们想得到别人给我们传来的数据就使用inject。

(尚硅谷)Vue笔记-------37_第10张图片 

我们只需要添加provide属性,只要加了这个,所有的后代组件都可以使用这个数据。

我们的后代组件里想获取数据,就要加上inject属性:

(尚硅谷)Vue笔记-------37_第11张图片

 (尚硅谷)Vue笔记-------37_第12张图片

既然能得到数据,那我们直接让数据在页面进行显示就可以了:

(尚硅谷)Vue笔记-------37_第13张图片 

(尚硅谷)Vue笔记-------37_第14张图片 

那如果我们想直接父组件给子组件进行传递数据呢?

我们也可以使用Inject这种方式:

(尚硅谷)Vue笔记-------37_第15张图片 

(尚硅谷)Vue笔记-------37_第16张图片 

我们也能得到数据,但是我们一般不这么去做。

我们用之前我们学过的props就可以了。

响应式数据的判断

 (尚硅谷)Vue笔记-------37_第17张图片

(尚硅谷)Vue笔记-------37_第18张图片 

(尚硅谷)Vue笔记-------37_第19张图片 

CompositionAPI的优势 

(尚硅谷)Vue笔记-------37_第20张图片

(尚硅谷)Vue笔记-------37_第21张图片 

Fragment组件 

(尚硅谷)Vue笔记-------37_第22张图片

Teleport组件

 (尚硅谷)Vue笔记-------37_第23张图片

(尚硅谷)Vue笔记-------37_第24张图片 

(尚硅谷)Vue笔记-------37_第25张图片 

 (尚硅谷)Vue笔记-------37_第26张图片

(尚硅谷)Vue笔记-------37_第27张图片 

我们写一个组件用于弹窗:

(尚硅谷)Vue笔记-------37_第28张图片 

然后在son组件中使用这个弹窗组件:

(尚硅谷)Vue笔记-------37_第29张图片 

 页面效果:

(尚硅谷)Vue笔记-------37_第30张图片

 因为我们是弹窗,所以我们要点击才能弹,我们再去修改一下:

(尚硅谷)Vue笔记-------37_第31张图片

 页面效果:

(尚硅谷)Vue笔记-------37_第32张图片

我们点击一下按钮:

(尚硅谷)Vue笔记-------37_第33张图片

我们去点击关闭弹窗:

(尚硅谷)Vue笔记-------37_第34张图片 

(尚硅谷)Vue笔记-------37_第35张图片 

注意我们弹窗的位置是在子组件中的 div中。 

实现了这样的一个弹窗显示的效果。

我们现在想给它来一个定位,就是固定想让它去在哪里显示:

就需要用到teleport了:

 (尚硅谷)Vue笔记-------37_第36张图片

(尚硅谷)Vue笔记-------37_第37张图片 

我们指定了我们的body在我们中的body中去显示。

我们这样弹窗不会影响组件的内部结构。

我们现在去做一个模态框的内容:

(尚硅谷)Vue笔记-------37_第38张图片 

(尚硅谷)Vue笔记-------37_第39张图片 

(尚硅谷)Vue笔记-------37_第40张图片 

 

 (尚硅谷)Vue笔记-------37_第41张图片

Suspense组件

(尚硅谷)Vue笔记-------37_第42张图片

我们要学习这个组件就要先学习一下异步组件:

(尚硅谷)Vue笔记-------37_第43张图片 

 

 (尚硅谷)Vue笔记-------37_第44张图片

(尚硅谷)Vue笔记-------37_第45张图片 

这两个组件在页面中是同时出现的。

我们现在不用import 组件名的方式去渲染了,我们之前的那种做法叫静态引入,我们现在来学习异步引入:

(尚硅谷)Vue笔记-------37_第46张图片

 这里的组件是app组件先出现在页面中,Child组件后出现。这是异步和静态引入的一个区别。

我们使用静态引入时,最里层的组件如果出现的慢,app组件就要去进行等待。但是我们异步组件,不管子组件是否会即使出现,都会先显示app组件。还是比较好的,但是也有一个问题,就是一开始只出现app组件的时候,可能用户会误以为这个app组件中没有内容呢。所以我们要想解决这个问题就要去使用我们的Suspense组件。

(尚硅谷)Vue笔记-------37_第47张图片

我们为了更好的看效果,把浏览器网速降低:

 (尚硅谷)Vue笔记-------37_第48张图片

(尚硅谷)Vue笔记-------37_第49张图片 

(尚硅谷)Vue笔记-------37_第50张图片 

我们现在给Child组件添加点数据:

(尚硅谷)Vue笔记-------37_第51张图片 

(尚硅谷)Vue笔记-------37_第52张图片 

我们现在使用正常的网速,然后更改Child组件中的setup里的return返回值:

 (尚硅谷)Vue笔记-------37_第53张图片

我们使用返回Promise实例并且在里面使用定时器。

 (尚硅谷)Vue笔记-------37_第54张图片

(尚硅谷)Vue笔记-------37_第55张图片 

我们发现这种情况也可以出现等待的提示。

我们当时的话是不允许这么写的:

 

但是这里就可以了:

 (尚硅谷)Vue笔记-------37_第56张图片

(尚硅谷)Vue笔记-------37_第57张图片 

(尚硅谷)Vue笔记-------37_第58张图片 

 

你可能感兴趣的:(Vue,vue.js,前端,javascript)