vue孙子组件向爷爷组件传值 组合式api

### Vue 组合式 API 中孙子组件向爷爷组件传递数据 在 Vue 的组合式 API 中，`provide` 和 `inject` 是一种强大的工具，允许跨层级组件之间进行通信。这使得子孙组件可以直接与祖父级组件交互而无需通过中间的父组件。 #### 使用 provide 和 inject 进行跨层级通信 为了实现从孙子组件向爷爷组件传递数据，可以在爷爷组件中使用 `provide` 提供一个响应式的对象或函数，在孙子组件中使用 `inject` 来接收这个提供者，并更新其状态。 ```javascript // 爷爷组件 (GrandparentComponent.vue) <template> <div> <h1>爷爷组件</h1> <p>接收到的数据: {{ receivedData }}</p> <ParentComponent /> </div> </template> <script setup lang="ts"> import ParentComponent from './ParentComponent.vue' import { ref, provide } from 'vue' const receivedData = ref('初始值') const updateReceivedData = (newData: string) => { receivedData.value = newData } provide('dataHandler', updateReceivedData) </script> ``` ```html <!-- 父组件 (ParentComponent.vue) --> <template> <div> <ChildComponent /> </div> </template> <script setup lang="ts"> import ChildComponent from './ChildComponent.vue' </script> ``` ```javascript // 孙子组件 (ChildComponent.vue) <template> <div> <button @click="sendDataToGrandparent">发送数据到爷爷组件</button> </div> </template> <script setup lang="ts"> import { inject } from 'vue' const dataHandler = inject<(value: string) => void>('dataHandler') function sendDataToGrandparent() { if (dataHandler) { dataHandler('来自孙子组件的消息') } } </script> ``` 这种方法不仅简化了多层嵌套组件间的通讯逻辑，还提高了代码可读性和维护性[^3]。 此外，还可以利用 `$emit` 结合自定义事件的方式让孙子组件触发事件冒泡至最顶层的爷爷组件处理，不过这种方式相对复杂一些，尤其是在深层嵌套结构下容易造成难以追踪的状态管理问题[^1]。 对于简单的场景，推荐优先考虑使用 `provide`/`inject` 方案来完成这种需求；而对于更复杂的业务逻辑，则可能需要评估是否引入专门的状态管理模式如 Vuex 或 Pinia[^2].