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

27. 依赖注入

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

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

App.vue(祖宗组件)

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（父组件）

vue 复制代码

<script>
import Child from "@/components/Child.vue";
export default {
  components: {
    Child
  },
}
</script>

<template>
  <h3>父组件</h3>
  <Child />
</template>

Child.vue(子组件)

vue 复制代码

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

<template>
  <h3>子组件</h3>
  <p>{{ message }}</p>
</template>

扩展：

也可以从data中读取数据：

App.vue

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

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

js 复制代码

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

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

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