依赖注入 ​

要为组件后代提供数据，需要使用到 provide() 函数：

<script setup>
import { provide } from 'vue'
provide(/* 注入名 */ 'message', /* 值 */ 'hello!')
</script>

如果不使用 <script setup> ，请确保 provide() 是在 setup() 同步调用的：

import { provide } from 'vue'
export default {
  setup() {
    provide(/* 注入名 */ 'message', /* 值 */ 'hello!')
}

provide() 函数接收两个参数。第一个参数被称为 注入名 ，可以是一个字符串或是一个 Symbol 。后代组件会用注入名来查找期望注入的值。一个组件可以多次调用 provide() ，使用不同的注入名，注入不同的依赖值。

第二个参数是提供的值，值可以是任意类型，包括响应式的状态，比如一个 ref：

import { ref, provide } from 'vue'
const count = ref(0)
provide('key', count)

提供的响应式状态使后代组件可以由此和提供者建立响应式的联系。

要注入上层组件提供的数据，需使用 inject() 函数：

<script setup>
import { inject } from 'vue'
const message = inject('message')
</script>

如果提供的值是一个 ref，注入进来的会是该 ref 对象，而 不会 自动解包为其内部的值。这使得注入方组件能够通过 ref 对象保持了和供给方的响应性链接。

带有响应性的 provide + inject 完整示例

同样的，如果没有使用 <script setup> ， inject() 需要在 setup() 内同步调用：

import { inject } from 'vue'
export default {
  setup() {
    const message = inject('message')
    return { message }
}

// 如果没有祖先组件提供 "message"
// `value` 会是 "这是默认值"
const value = inject('message', '这是默认值')

在一些场景中，默认值可能需要通过调用一个函数或初始化一个类来取得。为了避免在用不到默认值的情况下进行不必要的计算或产生副作用，我们可以使用工厂函数来创建默认值：

const value = inject('key', () => new ExpensiveClass(), true)

第三个参数表示默认值应该被当作一个工厂函数。

当提供 / 注入响应式的数据时， 建议尽可能将任何对响应式状态的变更都保持在供给方组件中 。这样可以确保所提供状态的声明和变更操作都内聚在同一个组件内，使其更容易维护。

有的时候，我们可能需要在注入方组件中更改数据。在这种情况下，我们推荐在供给方组件内声明并提供一个更改数据的方法函数：

<!-- 在供给方组件内 -->
<script setup>
import { provide, ref } from 'vue'
const location = ref('North Pole')
function updateLocation() {
  location.value = 'South Pole'
provide('location', {
  location,
  updateLocation
</script>

<!-- 在注入方组件 -->
<script setup>
import { inject } from 'vue'
const { location, updateLocation } = inject('location')
</script>
<template>
  <button @click="updateLocation">{{ location }}</button>
</template>

最后，如果你想确保提供的数据不能被注入方的组件更改，你可以使用 readonly() 来包装提供的值。

<script setup>
import { ref, provide, readonly } from 'vue'
const count = ref(0)
provide('read-only-count', readonly(count))
</script>

// 在供给方组件中
import { provide } from 'vue'
import { myInjectionKey } from './keys.js'
provide(myInjectionKey, { 
  /* 要提供的数据 */
})

// 注入方组件
import { inject } from 'vue'
import { myInjectionKey } from './keys.js'
const injected = inject(myInjectionKey)

TypeScript 用户请参考： 为 Provide / Inject 标注类型