vue3的Provide/Inject

Provide/Inject 是 Vue 3 中不太常见但非常实用的功能。它提供了一种在组件之间共享数据的方式，简化了组件之间的数据传输和通信。

通常，我们使用 props 将数据从父组件传递到子组件。 然而，当组件嵌套较深或者需要跨级数据传输时，通过 props 传递数据就会变得繁琐且多余。

在这种情况下，我们可以使用 Provide/Inject 来简化跨组件数据传输的过程。 父组件通过Provide提供数据，子组件通过Inject注入数据，实现数据共享。

ParentComponent.vue：

<template>  
	<div>    
		<ChildComponent />  
	</div>
</template>

<script>
import { provide } from 'vue';
import { sharedData } from './sharedData';

export default {  
	components: {   
 		ChildComponent  
 	},  
 	setup() {    
 		provide('sharedData', sharedData);  
 	}
 };
 </script>

ChildComponent.vue：

<template>  
	<div>   
		<GrandchildComponent />  
	</div>
</template>

<script>import { inject } from 'vue';
export default {  
	components: {    
		GrandchildComponent  
	},  
	setup() {    
		const sharedData = inject('sharedData');

    	console.log(sharedData);
    
    	return {      
    		sharedData    
    	};  
    }
};
</script>

在上面的代码中，父组件ParentComponent使用provide提供名为sharedData的数据，其值来自sharedData对象。 子组件ChildComponent使用inject来接收sharedData并利用组件内的共享数据。

通过使用 Provide/Inject，我们可以在组件之间共享数据，而不需要繁琐的 prop 传递。 这简化了代码并提高了组件之间的通信效率。