Vue中的依赖注入

Vue中的依赖注入 Provide：（提供）Inject：（注入）

用处：

父组件可以向子组件传入数据，而且无论组件层级多深，都可以注入由父组件提供给整条链路的依赖。

Provide：(在需要向外传递数据的组件中使用)

用于向后代组件提供数据，然而这不能够使数据具有响应性。（解决办法后续补充）

// 需要从vue中引入provide方法
import { provide } from 'vue';

// 定义了一个用于接收数据的值
let msg = reactive<string>('我是要被传递的值')

// 也可以传递数组、对象等值
// let PageData = reactive<object>(Data.list)


// 使用provide将值传递出去
provide('PageData',PageData)

注：值的保存方式因该为键值对 ('key',value)

Injext：(用于接受传递来数据，在接收值的组件中使用)

// 需要从vue中引入inject方法
import { inject } from 'vue';

// 定义一个变量用于接收传递过来的值
let message:any = inject('msg')

// any是TS语法，定义接收值的类型；其他值：number,string,object等

// 打印该值，确保接收成功
console.log(message)