vue3中provide和inject详解

本文主要是介绍vue3中provide和inject详解，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

provide和inject是什么

provide 和 inject 是 Vue.js 框架中提供的一种依赖注入机制。这种机制允许一个祖先组件（提供者）向其所有子孙组件（使用者）提供数据或方法，而不需要通过逐层组件传递属性（props）。

provide和inject如何使用

provide（）

类型

function provide<T>(key: InjectionKey<T> | string, value: T): void

详细信息
provide 功能允许一个组件定义可供其子孙组件注入的数据。
provide() 接受两个参数：第一个参数是要注入的 key，可以是一个字符串或者一个 symbol，第二个参数是要注入的值。当使用 TypeScript 时，key 可以是一个被类型断言为 InjectionKey 的 symbol。InjectionKey 是一个 Vue 提供的工具类型，继承自 Symbol，可以用来同步 provide() 和 inject() 之间值的类型。
与注册生命周期钩子的 API 类似，provide() 必须在组件的 setup() 阶段同步调用。
示例代码

<script setup>
import { ref, provide } from 'vue'
import { fooSymbol } from './injectionSymbols'// 提供静态值
provide('foo', 'bar')// 提供响应式的值
const count = ref(0)
provide('count', count)// 提供时将 Symbol 作为 key
provide(fooSymbol, count)
</script>

inject （）

类型

// 没有默认值
function inject<T>(key: InjectionKey<T> | string): T | undefined// 带有默认值
function inject<T>(key: InjectionKey<T> | string, defaultValue: T): T// 使用工厂函数
function inject<T>(key: InjectionKey<T> | string,defaultValue: () => T,treatDefaultAsFactory: true
): T

详细信息
inject 功能允许子孙组件接收祖先组件通过 provide 提供的数据。
第一个参数是注入的 key（这个key就是用来和provide设定的第一个参数进行匹配）。Vue 会遍历父组件链，通过匹配 key 来确定所提供的值。如果父组件链上多个组件对同一个 key 提供了值，那么离得更近的组件将会“覆盖”链上更远的组件所提供的值。如果没有能通过 key 匹配到值，inject() 将返回 undefined，除非提供了一个默认值。
第二个参数是可选的，即在没有匹配到 key 时使用的默认值。
第二个参数也可以是一个工厂函数，用来返回某些创建起来比较复杂的值。在这种情况下，必须将 true 作为第三个参数传入，表明这个函数将作为工厂函数使用，而非值本身。
与注册生命周期钩子的 API 类似，inject() 必须在组件的 setup() 阶段同步调用。
当使用 TypeScript 时，key 可以是一个类型为 InjectionKey 的 symbol。InjectionKey 是一个 Vue 提供的工具类型，继承自Symbol，可以用来同步provide() 和 inject() 之间值的类型。
示例代码

<script setup>
import { inject } from 'vue'
import { fooSymbol } from './injectionSymbols'// 注入不含默认值的静态值
const foo = inject('foo')// 注入响应式的值
const count = inject('count')// 通过 Symbol 类型的 key 注入
const foo2 = inject(fooSymbol)// 注入一个值，若为空则使用提供的默认值
const bar = inject('foo', 'default value')// 注入一个值，若为空则使用提供的函数类型的默认值
const fn = inject('function', () => {})// 注入一个值，若为空则使用提供的工厂函数
const baz = inject('factory', () => new ExpensiveObject(), true)
</script>

和响应式数据配合使用

provide和inject也可以传递响应式数据和方法，但是传递响应式数据的时候，官网做了一个推荐使用：当提供 / 注入响应式的数据时，**建议尽可能将任何对响应式状态的变更都保持在供给方组件中。**这样可以确保所提供状态的声明和变更操作都内聚在同一个组件内，使其更容易维护。

<!-- 在提供方组件内 -->
<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>