react context上下文与vue中 provide inject的用法区别

一、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(FspThemeContext)

3、使用

使用时直接：fspData?.fspTheme即可

二、vue2中provide和inject的使用

祖组件

子组件

	export default {
		name:'order',
		inject:['test','box'],
		created(){
		 console.log(this.layout.test); //hello
		 console.log(this.box);// world
		}
    }

三、vue3中provide和inject的使用

祖组件

子组件

provide() 必须在组件的 setup() 阶段同步调用。