当前位置：首页 > news >正文

前端流行框架Vue3教程：27. 依赖注入

news 2025/6/1 10:21:50

27. 依赖注入

通常情况下，当我们需要从父组件向子组件传递数据时，会使用 props。想象一下这样的结构：有一些多层级嵌套的组件，形成了一颗巨大的组件树，而某个深层的子组件需要一个较远的祖先组件中的部分数据。在这种情况下，如果仅使用 props则必须将其沿着组件链逐级传递下去，这会非常麻烦

在这里插入图片描述

这一问题被称为“prop 逐级透传”
provide和inject 可以帮助我们解决这一问题。一个父组件相对于其所有的后代组件，会作为依赖提供者。任何后代的组件树，无论层级有多深，都可以注入由父组件提供给整条链路的依赖

在这里插入图片描述

App.vue(祖宗组件)

<script>
import Parent from './components/Parent.vue'
export default {components: {Parent},/*** 提供组件间共享的数据或功能** 在Vue中，provide选项允许我们向子组件树提供数据或功能，而不需要通过props逐层传递* 这里提供的`message`属性，值为'祖宗的财产'，可以被任意子组件注入和使用** @providedProperties*   - {String} message 提供给子组件的字符串常量*/provide: {message: '祖宗的财产'}}
</script>
<template><h3>祖宗</h3><Parent/>
</template>

Parent.vue（父组件）

<script>
import Child from "@/components/Child.vue";
export default {components: {Child},
}
</script><template><h3>父组件</h3><Child />
</template>

Child.vue(子组件)

<script>
export default {// 注入外部提供的 message 属性或方法
// 这使得组件可以访问在其祖先组件中提供的 message，而无需通过每一层组件进行传递inject: ["message"]
}
</script><template><h3>子组件</h3><p>{{ message }}</p>
</template>

在这里插入图片描述

扩展：

也可以从data中读取数据：

App.vue

<script>
import Parent from './components/Parent.vue'export default {components: {Parent},data() {return {message: '祖宗的财产!!!'}},/*** @returns {Object} 返回一个对象，其中包含要提供的数据属性*/provide() {return {// 提供的 message 属性，其值为当前组件的 message 属性值message: this.message}}}
</script>
<template><h3>祖宗</h3><Parent/>
</template>

注入会在组件自身的状态之前被解析，因此你也可以在data()中访问到注入的属性：

Child.vue

<script>
export default {inject: ["message"],/*** 组件的初始数据函数** 该函数用于定义和初始化组件的数据属性在这里，我们创建了一个名为 `fullMessage` 的数据属性，* 它的初始值来源于组件的 `message` 属性这样做是为了在组件内部维护一个独立于原始 `message` 属性的副本，* 以便在不改变原始数据的情况下进行操作或展示*/data() {return {fullMessage: this.message}}
}
</script><template><h3>子组件</h3><p>{{ message }}</p><p>{{ fullMessage }}</p>
</template>

除了在一个组件中提供依赖，我们还可以在整个应用层面提供依赖:

main.js

import {createApp} from 'vue'
import App from './App.vue'const app = createApp(App)
// 提供一个全局数据项，键名为 'golabDate'，值为 '我是全局数据'
app.provide('golabDate', '我是全局数据')
app.mount('#app')