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文章来源：https://www.toymoban.com/news/detail-641122.html
<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 或事件总线等其他方法来实现数据共享。文章来源地址https://www.toymoban.com/news/detail-641122.html
到了这里，关于【Vue3】依赖注入的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
