子组件调用父组件方法 vue3.x ts语法
时间: 2023-08-28 11:22:29 浏览: 55
在 Vue 3.x 中,使用 TypeScript(TS)语法时,可以通过定义类型来强化子组件调用父组件方法的类型检查。下面是一个示例:
```vue
<template>
<div>
<child-component @custom-event="handleCustomEvent"></child-component>
</div>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
import ChildComponent from './ChildComponent.vue';
export default defineComponent({
components: {
ChildComponent
},
methods: {
handleCustomEvent() {
// 在这里处理子组件触发的事件
}
}
});
</script>
```
在上面的代码中,通过 `defineComponent` 函数来定义 Vue 组件,并使用 TypeScript 类型注解来声明组件的类型。
子组件的定义也需要进行相应的类型声明,如下所示:
```vue
<template>
<div>
<button @click="triggerCustomEvent">触发事件</button>
</div>
</template>
<script lang="ts">
import { defineComponent, ref } from 'vue';
export default defineComponent({
methods: {
triggerCustomEvent() {
this.$emit('custom-event');
}
}
});
</script>
```
在子组件中,可以使用 `defineComponent` 函数和相关的 TypeScript 类型注解来定义子组件的类型。
通过使用 TypeScript,你可以获得更好的类型检查和代码提示,确保子组件调用父组件方法时的类型安全。