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 传递。 这简化了代码并提高了组件之间的通信效率。