vue3 ts 孙组件调用爷组件 方法 示例

在Vue3中，如果你希望子组件能够调用父组件的方法，可以使用`$emit`方法来实现。下面是一个示例：

<!-- 父组件 -->
<template>
  <div>
    <h1>{{ message }}</h1>
    <ChildComponent @child-event="handleChildEvent" />
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import ChildComponent from './ChildComponent.vue';

const message = ref('Hello from parent component');

const handleChildEvent = (data: string) => {
  console.log(`Received data from child component: ${data}`);
};
</script>

<ChildComponent @child-event="handleChildEvent" />

<!-- 子组件 ChildComponent.vue -->
<template>
  <button @click="emitEvent">Click me</button>
</template>

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

defineEmits(['child-event']);

const emitEvent = () => {
  const data = 'Data from child component';
  emit('child-event', data);
};
</script>

在上述示例中，父组件中定义了一个名为`handleChildEvent`的方法，并将其传递给子组件作为事件处理函数。子组件中通过`emit`方法触发了`child-event`事件，并将数据传递给父组件。父组件通过在子组件上监听`child-event`事件，并在事件处理函数中接收到子组件传递的数据。

这样，子组件就能够调用父组件的方法并传递数据了。