Vue3学习笔记之Provide和Inject

Provide 和 Inject

基本使用

在一般的情况下，父组件想要把数据传递给子组件，使用的都是props。但是如果父组件想要把数据传给孙组件甚至更深层级的后代组件，props就会显得十分繁琐，这时候就要用到我们的Provide和Inject了。

这里我定义了三个组件，分别是fatherCom,sonCom,grandsonCom

在父组件里面加上provide，用来定义传给后代组件的数据，孙组件（后代组件）里面添加inject数组，再往数组里面添加相应的变量名，用来接收父组件provide传过来的数据。

页面如下，孙组件正常显示父组件传来的值：

上面所举的例子只是最简单的，假如我们需要吧父组件data()里面的数据传给孙组件(后代组件)呢？应该怎么做？

根据官方文档描述，需要把provide写成函数形式，不然无法正确指向this，只有写成provide()，this才会正确的指向当前组件。

如图，页面数据正常渲染：

处理响应式

在默认的情况下，provide里面的数据并不是响应式的，也就是说如果provide绑定的是data()里面的值，那么data()的值发生改变之后，provide是不会改变的，它里面绑定的一直是初始值。
代码:

页面：
点击按钮后，fatherData并不会根据testArray的改变而相应新的长度。

这时候，如果想要让数据相应，就要使用Vue3的计算属性computed对该值进行包裹，这样fatherData就是响应式的了。
代码：

页面：
我点击了两下按钮，这样数组的长度就是5,此时fatherData数据也做到了响应式，成功的渲染出了数字5。