vue3深入组件——依赖注入

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

 

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

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

provide('name', 'Info')
第一个参数是注入名：可以是字符串也可以是symbol，后代通过注入名查找期望的值
第二个参数是提供的值，值可为任意类型，包括响应式的状态——ref
 

//提供的响应式状态，使后代组件由此和提供者建立响应式联系




// 如果没有使用

2、应用层的provide：除了在一个组件中提供依赖，我们还可以在整个应用层面提供依赖：

import { createApp } from 'vue'

const app = createApp({})

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

// 在应用级别提供的数据在该应用内的所有组件中都可以注入

二、注入(inject)：要注入上层组件提供的数据，需使用 inject() 函数

2.1、注入默认值：如果注入名没有任何组件提供，会抛出一个运行时警告，如果注入一个值时，不必须有提供者，应该声明一个默认的，和 props 类似

// 如果没有祖先组件提供 "message"
// `value` 会是 "这是默认值"
const value = inject('message', '这是默认值')

有些情况默认值可能需要调用一个函数或者初始化一个类来获取，为了避免用不到默认值的情况下进行不必要的计算或者产生副作用，可以使用工厂函数，来创建默认值

const value = inject('key', () => new ExpensiveClass(), true)

第三个参数表示默认值应该被当作一个工厂函数。

三、和响应式数据配合使用