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

27. 依赖注入

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

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

App.vue(祖宗组件)

Parent.vue（父组件）

Child.vue(子组件)

---

扩展：

也可以从data中读取数据：

App.vue

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

Child.vue

---

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

main.js

import {createApp} from 'vue'
import App from './App.vue'

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

---

温馨提示
provide和inject只能由上到下的传递，不能反向传递