前言

之前我们说过，通过 props 可以在父组件中向子组件传递数据。但是有些时候，子组件的下面还有子组件，组件会出现多层嵌套的情况，当最深层组件需要父组件的数据的时候，就会出现一个 props 逐级透传的情况，而组件也会形成一个一个巨大的组件树。

而在这个 props 的传递过程中，你会发现其中的有些组件可能并不需要这些 props 传递下来的数据，但是为了保证最深层的组件得到预期的数据，只能进行逐级透传。显然这种情况我们是不想看到的。

而为了解决这个问题 vue 也给提供了两个属性，来帮助我们解决这个问题 -- provide 和 inject。下面我们来具体看一看它把。

provide

通过 provide()函数，我们可以使父组件对组件后代提供数据。也就是说，父组件可以作为一个依赖提供者，其后代的所有组件都可以通过注入的形式获取父组件提供的依赖。

<script setup>import { provide } from 'vue'
provide(/* 注入名 */ 'title', /* 值 */ '我是标题!')</script>

我们可以看到，provide 接收两个参数，第一个参数是注入名，第二个参数是提供的值。而后代组件可以通过注入名来进行相应的数据注入。而且一个组件也可以进行多次调用 provide 进行注册。

当然，如果你想建立一个响应式的依赖，也可以通过 ref 来实现：

import { ref, provide } from 'vue'
const title = ref('我是标题')provide('title', title)

inject

通过 inject()函数，可以注入其上级组件的数据。

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

注意：如果提供的值是一个 ref，为了保持其响应性，是不会进行自动解包的。

Symbol 作为注入名

当我们在做一个数据业务复杂的大型项目时，可能会出现多个依赖，而我们就可以通过 Symbol 来作为注入名来避免命名冲突。

// injectKeys.jsexport const injectionTitle = Symbol()

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

// 注入方组件import { inject } from 'vue'import { injectionTitle } from './injectKeys.js'
const injectionTitle = inject(injectionTitle)