一、react中：
数据传递
1、引入createContext
import { createContext } from "react";2、创建并导出
export const FspThemeContext = createContext({});3、传递数据（value项不能缺少！！）
①不解构直接使用Provider
②解构后使用
const { Provider } = FspThemeContext
数据接收
1、在孙组件中引入useContext，以及上文导出的FspThemeContext
import { useContext } from "react";
import { FspThemeContext } from "/@/pages/XXX";2、将获取到的上下文赋值给fspData
const fspData = useContext<any>(FspThemeContext)3、使用
使用时直接：fspData?.fspTheme即可
二、vue2中provide和inject的使用
祖组件
<template>
<div>
<!-- 主内容 -->
<router-view></router-view>
</div>
</template>
<script>
export default {
name:'layout',
provide(){
return {
test:this.test //这里的this值当前layout组件实例
box:'world'
}
},
data() {
return {
test:'hello'
}
},
}
</script>
子组件
export default {
name:'order',
inject:['test','box'],
created(){
console.log(this.layout.test); //hello
console.log(this.box);// world
}
}
三、vue3中provide和inject的使用
祖组件
<script setup>
import { ref, provide } from 'vue'
import { fooSymbol } from './injectionSymbols'
// 提供静态值
provide('foo', 'bar')
// 提供响应式的值
const count = ref(0)
provide('count', count)
// 提供时将 Symbol 作为 key
provide(fooSymbol, count)
</script>子组件
<script setup>
import { inject } from 'vue'
import { fooSymbol } from './injectionSymbols'
// 注入值的默认方式
const foo = inject('foo')
// 注入响应式的值
const count = inject('count')
// 通过 Symbol 类型的 key 注入
const foo2 = inject(fooSymbol)
// 其他！！！！！-----------
/* 第二个参数是可选的，
即在没有匹配到 key 时使用的默认值。它也可以是一个工厂函数，用来返回某些创建起来比较复杂的值。
如果默认值本身就是一个函数，那么你必须将 false 作为第三个参数传入，表明这个函数就是默认值，
而不是一个工厂函数。*/
// 注入一个值，若为空则使用提供的默认值
const bar = inject('foo', 'default value')
// 注入一个值，若为空则使用提供的工厂函数
const baz = inject('foo', () => new Map())
// 注入时为了表明提供的默认值是个函数，需要传入第三个参数
const fn = inject('function', () => {}, false)
</script>provide() 必须在组件的 setup() 阶段同步调用。
