（尚硅谷）Vue笔记-------37

provide与inject

 

 

 

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

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

 

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

 

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

 

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

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

 

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

 

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

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

 

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

 

 

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

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

 

 

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

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

响应式数据的判断

 

 

 

CompositionAPI的优势 

 

Fragment组件 

Teleport组件

 

 

 

 

 

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

 

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

 

 页面效果：

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

 页面效果：

我们点击一下按钮：

我们去点击关闭弹窗：

 

 

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

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

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

就需要用到teleport了：

 

 

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

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

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

 

 

 

 

 

Suspense组件

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

 

 

 

 

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

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

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

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

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

 

 

 

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

 

 

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

 

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

 

 

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

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

 

但是这里就可以了：