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

要在Vue 3中的子组件中调用父组件的方法，可以使用`$emit`和`$listeners`。以下是一个示例：

在父组件中，定义一个方法并将其传递给子组件：

<template>
  <child-component @custom-event="handleCustomEvent"></child-component>
</template>

<script lang="ts">
import { defineComponent } from 'vue';

export default defineComponent({
  methods: {
    handleCustomEvent() {
      console.log('Custom event triggered from child component');
    },
  },
});
</script>

在子组件中，触发自定义事件并传递参数：

<template>
  <button @click="triggerCustomEvent">Trigger Custom Event</button>
</template>

<script lang="ts">
import { defineComponent } from 'vue';

export default defineComponent({
  methods: {
    triggerCustomEvent() {
      this.$emit('custom-event', 'Custom event data');
    },
  },
});
</script>

在父组件中，可以使用`$listeners`属性来监听子组件的自定义事件：

<template>
  <child-component @custom-event="handleCustomEvent"></child-component>
</template>

<script lang="ts">
import { defineComponent } from 'vue';

export default defineComponent({
  methods: {
    handleCustomEvent(data: string) {
      console.log('Custom event data:', data);
    },
  },
});
</script>

注意，`$listeners`属性只能用于传递外部事件监听器，因此不能直接在父组件中调用子组件的方法。如果需要在父组件中调用子组件的方法，可以使用`ref`引用子组件并直接调用其方法。