vue3(依赖注入provide/inject)

当我们需要从父组件向子组件传递数据时，我们使用 props，如果有多个子组件和孙组件需要父组件的数据时，就会出现结构的混乱，此时可以使用依赖注入provide/inject,当父组件provide注入数据时，其余的子组件，孙组件就可以之间使用inject拿到数据

使用的例子如下：

//父组件
<template>

  <div>
    <h1>app.vue(一级)</h1>
    <label>
      <input v-model="colorVal" value="red" name="color" type="radio">
      红色
    </label>
  </div>
<div class="box">
</div>
<hr>
<PorvideA></PorvideA>
</template>
<script setup lang='ts'>
import { provide, ref } from 'vue';
import PorvideA from './components/view/porvideA.vue';
const colorVal = ref("red")
provide('colorAA',colorVal)
</script>

<style scoped>
.box{
  height: 50px;
  width: 50px;
  border: 1px solid #ccc;
  background: v-bind(colorVal)
}
</style>

//子组件
<template>
<h1>provideA.vue(二级)</h1>
<div class="box"></div>
<hr></hr>
</template>

<script setup lang='ts'>
import { inject } from 'vue';
import ProvideB from './provideB.vue';

const colorBB =inject('colorAA')
console.log(colorBB);

</script>

<style scoped> 
.box{
  width: 50px;
  height: 50px;
  border: 1px solid #ccc;
  background: v-bind(colorBB)
}
</style>

provide 可以在祖先组件中指定我们想要提供给后代组件的数据或方法，而在任何后代组件中，我们都可以使用 inject 来接收 provide 提供的数据或方法。provide需要提供两个参数，一个是绑定的需要传出去的名字，一个是对应的值