Provide/inject

我们使用最多的父组件向子组件传值，使用Props最多，遇到层级的组件，也可以通过组件链逐级传递下去，这会非常的麻烦，如图：Root组件将值传递给Footer,Footer又继续往下走，传到DeepChild组件，这样就会造成非常长的组件链，造成不必要的麻烦

我们可以使用provide和inject来解决这一问题，将 provide 作为依赖，给所有后代组件提供数据，无论层级有多深，inject在所有后代组件中都可以接收到

下面我们定义三个组件A，B，C 来演示，A组件的数据，在BC组件接收到

A组件，也就是依赖组件，这里定义为祖父组件

  <h1>祖父</h1>
  <label>
    <input type="radio" " value="red" v-model="colorVal">
    红色
  </label>
  <label>
    <input type="radio" " value="green" v-model="colorVal">
    绿色
  </label>
  <B></B>

B组件，这里定义为子组件,B组件嵌套C组件

<div>
  <h1>子组件</h1>
<C></C>
</div>

C组件 这里定义为孙子组件

<h1>孙子组件</h1>

在A组件中，通过provide来注入依赖值，provide接收两个参数值，key和value

import { provide} from 'vue';

provide('color',colorVal)

在B组件，用inject来读取A组件定义的值，读取A组件定义的key即可，利用的属性我们可以在CSS中定义background-color: v-bind(color);来改变颜色，在C组件也是同样的方法

import { inject } from 'vue';

const color = inject('color')

改变A组件的color，BC组件也随之发生变化，这就是Provide/inject的妙用，不需要再一层层的去嵌套使用了

注意的是在任意后代组件中都可以修改传过来的值，不想被子组件修改的话，在provide注入依赖值的时候，绑定readonly只读属性，即可。

Vue3的组合式 API：依赖注入

Provide/inject