【Vue3】依赖注入

provide 和 inject 是 Vue.js 中用于实现依赖注入的两个关联功能。它们允许你在祖先组件中提供数据，然后在子孙组件中注入这些数据，实现组件之间的数据共享和传递。

• provide：provide 是一个选项，你可以在父组件中通过它来提供数据。你可以在 provide 选项中声明要共享的数据。这些数据可以是任何 JavaScript 值，包括对象、函数等。

• inject：inject 是另一个选项，你可以在子孙组件中通过它来注入父组件提供的数据。inject 的值是一个包含了你想要注入的属性名称的数组或对象。

App.vue

<template>
  <h1>App.vue(爷爷级别)</h1>
  <label>
    <input v-model="colorVal" value="red" name="color" type="radio">红色
  </label>
  <label>
      <input v-model="colorVal" value="pink" name="color" type="radio">粉色
    </label>
    <label>
      <input v-model="colorVal" value="yellow" name="color" type="radio">黄色
    </label>

    <div class="box">

    </div>
    <hr>
    <provideAVue></provideAVue>
</template>

<script setup lang="ts">
import {ref, reactive, inject, readonly,provide} from 'vue'
import provideAVue from './components/provideA.vue'
const colorVal = ref<string>('red')
provide('color', colorVal)
// 为防止子组件修改color的值，可以用readonly绑定 provide('color', readonly(colorVal))
</script>

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

provideA.vue

<template>
  <h1>provideA.vue(父亲级别)</h1>
  <div class="box">

  </div>
  <hr>
  <provideBVue></provideBVue>
</template>

<script setup lang="ts">
import { ref, reactive, inject } from 'vue';
// 直接<ref<string>>会报错：'ref' refers to a value, but is being used as a type here. Did you mean 'typeof ref'?  需要用<Ref<string>> 引入 type {Ref}
import type {Ref} from 'vue'
import provideBVue from './provideB.vue'
const color = inject<Ref<string>>('color')

</script>

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

provideB.vue

<template>
  <h1>provideB.vue(孙子级别)</h1>
  <div>
    <button @click="change">修改 provide 的值 yellow</button>
  </div>
  <div class="box">

  </div>
  <hr>
  <provideBVue></provideBVue>
</template>

<script setup lang="ts">
import { ref, reactive, inject } from 'vue';
import type { Ref } from 'vue'
const color = inject<Ref<string>>('color', ref('red'))
// provide 传过来的值可以被子组件修改，不想被修改可以使用 readonly 对变量进行绑定
const change = () => {
  // 报错：'color' is possibly 'undefined'.  
  // color.value = 'yellow'

  // 报错：The left-hand side of an assignment expression may not be an optional property access.
  // color?.value = 'yellow'

  // 解决方法一：使用 !. 非空断言解决
  // color!.value = 'yellow'

  // 解决方法二：添加默认值, ref('red')
  color.value = 'yellow'
}

</script>

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

需要注意的是，provide 和 inject 不适用于跨级的父子组件关系，因为 Vue 的设计是鼓励将组件树限制在父子关系中，而不是过多地嵌套。在跨级关系中，你可能需要使用 Vuex 或事件总线等其他方法来实现数据共享。