作用：
实现祖与后代组件间通信
套路：父组件有一个 provide 选项来提供数据，后代组件有一个 inject 选项来开始使用这些数据
用法：
用法很简我们需要引入方法 在祖组件中调用provide方法来提供数据 在子组件中调用inject方法来接收数据
祖组件中：
setup(){......let car = reactive({name:'奔驰',price:'40万'})provide('car',car)......
}后代组件中：
setup(props,context){......const car = inject('car')return {car}......
}代码演示
组件层级关系 App ===> Child ===> Son （父、子、孙）
我们在App组件中定义了一条数据 想要将数据传递给孙子组件(Son)使用
<template><div class="app"><h3>我是App组件（祖），{
{name}}--{
{price}}</h3><Child/></div>
</template><script>import { reactive,toRefs,provide } from 'vue'import Child from './components/Child.vue'export default {name:'App',components:{Child},setup(){let car = reactive({name:'奔驰',price:'40W'})provide('car',car) //给自己的后代组件传递数据return {...toRefs(car)}}}
</script><style>.app{background-color: gray;padding: 10px;}
</style>我们在App组件中定义了一个对象 调用provide方法 将数据提供给后代组件使用 方法中有两个参数 第一个是给数据起一个名称 第二个是提供的数据
之后我们在Son（孙组件）中调用了inject方法来使用App组件提供的数据
<template><div class="son"><h3>我是Son组件（孙），{
{car.name}}--{
{car.price}}</h3></div>
</template><script>import {inject} from 'vue'export default {name:'Son',setup(){let car = inject('car') // 使用App提供的数据return {car}}}
</script><style>.son{background-color: orange;padding: 10px;}
</style>最后我们打开浏览器可以看到 在祖孙组件上都能够正常使用数据
