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事件，并在事件处理函数中接收到子组件传递的数据。
这样，子组件就能够调用父组件的方法并传递数据了。