provide和inject组件传值

作用：实现祖孙组件间的通信

使用：父组件有一个provide选项来提供数据，后代组件有一个inject选项来使用这些数据

具体写法：

祖组件

<template>
	<div class="App">
		app组件
		<Son />
	</div>
</template>
<script lang="ts" setup>
	import { reactive, provide } from 'vue'
	import Son from './son.vue'
	const car = reactive({
		name: '汽车",
		price: 40
	})
	provide('car', car)		// 给后代组件传递数据，第一个参是给属性名，第二个参是要传的数据
</script>

子组件

<template>
	<div class="son">
		子组件
		<Child />
	</div>
</tempalte>
<script lang="ts" setup>
	import { inject } from 'vue'
	import Child from './child.vue'
	let data = inject('car')
	console.log(data)	// app组件是son的父组件，此处用inject也能拿到provide传的数据，但是父子传值一般不用provide inject，而是用props
</script>

孙组件

<template>
	<div class="child">
		孙组件
	</div>
</template>
<script lang="ts" setup>
	import { inject } from 'vue'
	let data = inject('car')
	console.log(data)	// 此处就拿到了app组件传过来的数据，该数据是proxy响应式数据
</script>