vue3父组件传递子孙组件

实现 Vue3 父组件向子孙组件传递数据
在 Vue 3 中，有多种方式可以实现父组件向子孙组件传递数据。其中一种常用的方法是通过 provide 和 inject API 来完成这一操作。
使用 Provide/Inject 方式
这种方式允许祖先组件为其所有子孙后代指定依赖注入的内容，而不需要逐层向下传递属性。下面是一个具体的例子：
<!-- ParentComponent.vue -->
<template>
<div>
<h2>Parent Component</h2>
<p>{{ parentMessage }}</p>
<ChildComponent />
</div>
</template>

<script setup>
import ChildComponent from './ChildComponent.vue';
import { ref, provide } from 'vue';

const parentMessage = ref('This is a message from the parent component');
// 提供数据给所有的子级组件
provide('parentData', parentMessage);
</script>
登录后复制
<!-- ChildComponent.vue -->
<template>
<div>
<GrandchildComponent />
</div>
</template>

<script setup>
import GrandchildComponent from './GrandchildComponent.vue';
</script>
登录后复制
<!-- GrandchildComponent.vue -->
<template>
<div>
<h3>Grandchild Component</h3>
<!-- 接收来自顶层父组件的数据 -->
<span>{{ injectedData }}</span>
</div>
</template>

<script setup>
import { inject } from 'vue';

// 注入由顶级父组件提供的数据
const injectedData = inject('parentData');
</script>
登录后复制
这种方法非常适合处理跨多层级嵌套的场景，并且保持了良好的解耦合度[^3]。
对于更复杂的场景，还可以考虑使用 Vuex 或者 Composition API 结合自定义 Hook 函数等方式来进行状态管理以及逻辑复用。不过这些方案相对复杂一些，适用于大型应用开发中的需求。