这几个方法都是用于多层嵌套组件时，父组件向某个深层组件的传值，避免了props一层一层的传递。
react createContext 和 useContext
新建context.ts文件：
import { createContext } from 'react'
export const MyContext = createContext<any>(null)
父组件：
import {MyContext} from './context'
import Child1 from './child1'
function Home(props: any) {
const [data, setData] = useState({
name: '测试',
value: 222
})
return (
<MyContext.Provider value={data}>
<div className="Home">
<Child1 />
</div>
</MyContext.Provider>
)
}
export default Home
创建child1组件及child2组件，其中，child1引入了child2，组件引入结构为：
home >> child1>>child2
child2深层组件：
import { useContext } from 'react'
import {MyContext} from './context'
function child2() {
const data:any = useContext(MyContext)
console.log(data) // {name: '测试', value: 222}
return (
<div className="child2">
child2
</div>
)
}
export default child2
当组件上层最近的 <MyContext.Provider> 更新时，该 Hook 会触发重渲染，并使用最新传递给 MyContext provider 的 context value 值。
本例中，当父组件data值改变时，会触发重渲染，子组件child2也会更新。
vue3 provide 和 inject
vue3中依赖注入就相对于简单点，组件结构和上述一样：
父组件：
<template>
<div class="home">
<child1></child1>
</div>
</template>
<script setup name="home">
import child1 from '@/components/child1.vue'
const message = ref(123)
provide('message', message)
provide('more',{
name:1,
age:2
})
</script>
child2组件：
<template>
<div class="child2">
2222
</div>
</template>
<script setup>
const message = inject('message')
const obj = inject('more')
console.log(message.value,obj) // 123 {name: 1, age: 2}
</script>
一样的，当父组件对应的值发生改变时，也会触发重渲染。
