vue3深入组件——依赖注入

一、场景介绍：一般父子间信息传递是通过props，但是一个多层嵌套的组件，必须将其沿着组件逐级的传递下去，这就是props的逐级透传。

 

二、上述情况下，就需要用到provide 和 inject；一个父组件相对于其所有的后代组件，会作为依赖提供者。任何后代的组件树，无论层级有多深，都可以注入由父组件提供给整条链路的依赖。

1、为后代组件提供数据，需要使用Provide (提供)

provide('name', 'Info')
第一个参数是注入名：可以是字符串也可以是symbol，后代通过注入名查找期望的值
第二个参数是提供的值，值可为任意类型，包括响应式的状态——ref
 
<script setup>
import {ref, provide } from 'vue'
const count =ref(0);
provide('key', count)
</script>
//提供的响应式状态