vue3 爷调用孙组件方法

### Vue3 中祖父组件调用孙子组件方法

在 Vue3 中，可以通过 `provide` 和 `inject` 实现跨层级通信。这种方式允许祖先组件向其所有子孙后代提供数据或函数，而不需要通过中间的每一层手动传递属性。

当需要从祖父组件调用特定于某个孙子组件的方法时，可以采用如下最佳实践：

#### 方法一：使用 Provide/Inject 机制共享方法

祖父组件中定义并提供一个可调用的方法给所有的子代组件：

// Grandparent.vue
<template>
  <div>
    <Parent />
    <button @click="invokeChildMethod">Invoke Child Method</button>
  </div>
</template>

<script setup>
import { ref, provide } from 'vue'
const childMethodInvoker = ref(null)

function invokeChildMethod() {
  if (childMethodInvoker.value && typeof childMethodInvoker.value === 'function') {
    childMethodInvoker.value()
  }
}

provide('invokeChild', (method) => {
  childMethodInvoker.value = method;
})
</script>

孙组件注入该方法，并注册自身的回调：

// Child.vue
<script setup>
import { inject } from 'vue'

const registerCallback = inject('invokeChild')

registerCallback(() => console.log('Grandchild method called!'))
</script>

这种方法利用了 `provide/inject` 的灵活性来实现间接调用[^1]。

#### 方法二：借助事件总线或其他状态管理模式

另一种方式是创建全局事件总线或者使用 Vuex 进行集中式的状态管理和分发操作。这适用于更复杂的应用场景，在这些情况下推荐使用专门的状态管理库如 Pinia 或者继续沿用 Vuex 来处理多级嵌套组件间的交互逻辑[^2]。

对于简单的应用场景，第一种方案已经足够；而对于大型项目，则建议考虑引入更加结构化的解决方案以保持代码清晰度和维护性。