Prop逐级透传问题

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

注意，虽然这里的<Footer>组件可能根本不关心这些props，但为了使<DeepChild>能访问到它们，仍然需要定义并向下传递。如果组件链路非常长，可能会影响到更多这条路上的组件。这一问题被称为“prop逐级透传”，显然是希望尽量避免的情况。

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

Provide(提供)

要为组件后代提供数据，需要使用到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)

提供的响应式状态使后代组件可以由此与提供者产生响应式联系。

应用层Provide

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

import { createApp } from 'vue'

const app = createApp({})

app.provide(/*注入名*/ 'message', /*值*/ 'hello!')

在应用级别提供的数据在该应用内所有组件都可以注入。这在编写插件的时候非常有用。

Inject(注入)

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

<script setup>
import { inject } from 'vue'

const message = inject('message')
</script>

如果有多个父组件提供了相同键的数据，注入将解析为组件链上最近的父组件所注入的值。

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

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

import { inject } from 'vue'

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

注入默认值

默认情况下，inject会假设传入的注入名会被某个祖先链上的组件提供。如果该注入名的确没有任何组件提供，则会抛出一个运行时警告。

如果在注入一个值时不要求必须有提供者，那么我们应该声明一个默认值，和props类似：

// 如果祖先组件没有提供"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>

使用Symbol作为注入名

在构建大型项目的应用中，包含非常多的依赖提供，最好使用Symbol来作为注入名来避免潜在的冲突。

//key.js
export const myInjectKey = Symbol()

//在供给方组件中
import { provide } from 'vue'
import { myInjectKey } from './keys.js'

provide(myInjectKey, {
  /* 要提供的数据 */
})

//注入方组件
import { inject } from 'vue'
import { myInjectKey } from './keys.js'

const injected = inject(myInjectKey)