Vue3中provide和in依赖注入

1、应用场景：

       在多层嵌套的组件树，如果深层的子组件需要一个较远的祖先节点中的部分数据通过props去逐级透传则过于繁琐，所以provide和inject可以做到一个父组件通过provide使所有的后代组件通过inject去获取父组件中的部分数据

1.1使用props去处理：

1.2使用provide和inject去处理：

2、Provide和inject的使用

  2.1 provide：

        provide(参数1，参数2)

        第一个参数：注入名，类型为 string 或 Symbol

        第二个参数：值， 可以为任意类型

在组件中的应用：

<script setup lang="ts">
import {provide} from 'vue'
//     注入名   值
provide('key','value')
</script>

全局依赖·：

import { createApp } from 'vue'

const app = createApp({})

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

注意：如果不使用 script setup，请确保provide()是在setup()中同步调用

2.2 Inject：

<script setup lang="ts">
import {inject} from 'vue'
const msg = inject('key','默认值')// 如果通过key没有取到值，便可以使用第二个参数设置默认值

</script>

默认值也可以是工厂函数

const value = inject('key',()=>{},true)

当默认值为工厂函数时要设置第三个参数true，默认值才会被视为工厂函数

注意：如果provide传入的值是一个响应式的，那么子组件可以改变父组件的值，可以在provide时将响应式数据设置为readonly()即可。

<script setup lang="ts">
import { ref, provide, readonly } from 'vue'
const msg = ref('')
provide('key', readonly(msg))

</script>

更多详情请看官方文档