Vue孙组件如何调用祖父组件中的方法？

要在Child组件双击按钮时调用GrandParent组件的方法，不推荐直接使用this.$parent.$parent（组件层级变动时会失效），以下是几种更可靠的实现方案：

1. 逐层传递方法（基础直观方案） #

通过props将GrandParent的方法逐层传递给Child，Child直接调用该方法：

GrandParent.vue

<template>
  <Parent :callGrandParent="handleGrandParentFunction" />
</template>

<script setup>
import Parent from './Parent.vue'

const handleGrandParentFunction = (model) => {
  // 祖父组件的业务逻辑
  console.log('触发祖父组件方法，参数：', model)
}
</script>

Parent.vue

<template>
  <Child :callGrandParent="callGrandParent" />
</template>

<script setup>
import Child from './Child.vue'
defineProps(['callGrandParent'])
</script>

Child.vue

<template>
  <button @dblclick="callGrandParent(model)">call grandparent</button>
</template>

<script setup>
defineProps(['callGrandParent'])
const model = '测试参数' // Child组件内部数据
</script>

2. Provide/Inject（Vue官方推荐跨层级方案） #

利用Vue的provide和inject特性，直接将GrandParent的方法暴露给后代组件，无需逐层传递：

GrandParent.vue

<template>
  <Parent />
</template>

<script setup>
import Parent from './Parent.vue'
import { provide } from 'vue'

const handleGrandParentFunction = (model) => {
  console.log('触发祖父组件方法，参数：', model)
}
// 向后代组件提供方法
provide('callGrandParent', handleGrandParentFunction)
</script>

Child.vue

<template>
  <button @dblclick="callGrandParent(model)">call grandparent</button>
</template>

<script setup>
import { inject } from 'vue'
// 注入祖父组件提供的方法
const callGrandParent = inject('callGrandParent')
const model = '测试参数'
</script>

3. 状态管理工具（Pinia/Vuex，适合复杂项目） #

如果项目使用状态管理工具，可将祖父组件的方法逻辑迁移到store中，Child直接调用store方法：

Pinia示例（store/index.js）

import { defineStore } from 'pinia'

export const useMainStore = defineStore('main', {
  actions: {
    grandParentFunction(model) {
      // 原祖父组件的业务逻辑
      console.log('触发祖父组件方法，参数：', model)
    }
  }
})

Child.vue

<template>
  <button @dblclick="store.grandParentFunction(model)">call grandparent</button>
</template>

<script setup>
import { useMainStore } from './store'
const store = useMainStore()
const model = '测试参数'
</script>

4. 事件总线（mitt，适合简单跨组件通信） #

创建事件总线实例，GrandParent监听事件，Child触发事件：

1. 安装mitt：npm install mitt
2. 创建bus.js：

import mitt from 'mitt'
export default mitt()

GrandParent.vue

<template>
  <Parent />
</template>

<script setup>
import Parent from './Parent.vue'
import bus from './bus.js'
import { onMounted, onUnmounted } from 'vue'

const handleGrandParentFunction = (model) => {
  console.log('触发祖父组件方法，参数：', model)
}

onMounted(() => {
  // 监听事件
  bus.on('callGrandParent', handleGrandParentFunction)
})

onUnmounted(() => {
  // 销毁监听，避免内存泄漏
  bus.off('callGrandParent', handleGrandParentFunction)
})
</script>

Child.vue

<template>
  <button @dblclick="bus.emit('callGrandParent', model)">call grandparent</button>
</template>

<script setup>
import bus from './bus.js'
const model = '测试参数'
</script>

内容的提问来源于stack exchange，提问作者hretic