Vue3中组件数据传递之provide 与 inject

作用：

        实现祖与后代组件间通信

        套路：父组件有一个 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>

        最后我们打开浏览器可以看到 在祖孙组件上都能够正常使用数据