vue3 孙组件如何调用爷组件方法

在 Vue 3 中，可以通过 `provide` 和 `inject` 实现跨层级组件间通信。具体步骤如下：

1. 在爷组件中，通过 `provide` 来提供一个方法或属性。

<template>
  <div>
    <h2>我是爷组件</h2>
    <son-component />
  </div>
</template>

<script>
import { defineComponent } from 'vue'
import SonComponent from './SonComponent.vue'

export default defineComponent({
  components: {
    SonComponent
  },
  setup() {
    const sayHello = () => {
      console.log('Hello from Grandpa Component!')
    }

    // 提供 sayHello 方法
    provide('sayHello', sayHello)

    return {}
  }
})
</script>

在上述代码中，我们通过 `provide` 提供了一个名为 `sayHello` 的方法。

2. 在孙组件中，通过 `inject` 来注入爷组件提供的方法或属性。

<template>
  <div>
    <h2>我是孙组件</h2>
    <button @click="handleClick">调用爷组件方法</button>
  </div>
</template>

<script>
import { defineComponent, inject } from 'vue'

export default defineComponent({
  setup() {
    // 注入爷组件提供的 sayHello 方法
    const sayHello = inject('sayHello')

    const handleClick = () => {
      if (sayHello) {
        sayHello()
      }
    }

    return {
      handleClick
    }
  }
})
</script>

在上述代码中，我们通过 `inject` 注入了爷组件提供的名为 `sayHello` 的方法，然后在 `handleClick` 方法中调用了该方法。

这样，孙组件就可以调用爷组件提供的方法了。