【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 或事件总线等其他方法来实现数据共享。