vue3 依赖注入Provide / Inject

Provide / Inject：

在我学习依赖注入之前，一般父组件传给孙组件一般是通过prop一层一层的传递，这样的嵌套就会相对繁琐，Provide / Inject：就很好的解决了这一问题。

先看效果：

 这里我定义了三个组件，index.vue作为爷爷级别的组件，Aview作为儿子级别的组件，Bview作为孙子级别的组件。在index.vue定义颜色，用provide抛出去，在子组件和孙组件中用Inject接收其值。看代码

index.vue（爷爷级别组件）：

Aview.vue（儿子级别组件）：

Bview(孙子级别组件)：

备注：一般情况下，使用依赖注入Provide / Inject的组件，子组件修改内容也会影响到相关联的组件，阻止方法：/provide('color', readonly(colorVal))  ，添加readonly的话，子组件就不可以修改依赖注入的值