vue3深入组件依赖注入
目录
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>
//提供的响应式状态，使后代组件由此和提供者建立响应式联系
// 如果没有使用<script setup>,需在 setup() 同步调用
<script>
import { provide } 'vue'
setup(){
provide(/*注入名*/'message',/*值*/ 'hello')
}
</script>2、应用层的provide：除了在一个组件中提供依赖，我们还可以在整个应用层面提供依赖：
import { createApp } from 'vue'
const app = createApp({})
app.provide(/* 注入名 */ 'message', /* 值 */ 'hello!')
// 在应用级别提供的数据在该应用内的所有组件中都可以注入
二、 注入(inject) ：要注入上层组件提供的数据，需使用 函数
<script setup>
import { inject } from 'vue'
const message = inject('message')
<script>
// 如果提供的是一个ref，注入进来的也是ref对象，不易自动解包为其内部的值，这使得注入方组件可以通过ref对象和提供方保持响应式链接
<script>
import { inject } 'vue'
setup(){
const message = inject('message')
return { message }
}
</script>2.1、注入默认值：如果注入名没有任何组件提供，会抛出一个运行时警告，如果注入一个值时，不必须有提供者，应该声明一个默认的，和 props 类似
// 如果没有祖先组件提供 "message"
// `value` 会是 "这是默认值"
const value = inject('message', '这是默认值')有些情况默认值可能需要调用一个函数或者初始化一个类来获取，为了避免用不到默认值的情况下进行不必要的计算或者产生副作用，可以使用工厂函数，来创建默认值
const value = inject('key', () => new ExpensiveClass(), true)第三个参数表示默认值应该被当作一个工厂函数。