首页vue3+ts点击子组件按钮调用父组件方法

vue3+ts点击子组件按钮调用父组件方法

时间: 2024-07-18 10:00:37 浏览: 181

在Vue 3中使用TypeScript，当子组件需要调用父组件的方法时，通常会通过emit事件来实现。这里是一个简单的例子：

在子组件的模板中，假设有一个按钮，你想点击后触发父组件的方法，可以这样写：

<template>
  <button @click="callParentMethod">点击我</button>
</template>

<script lang="ts">
import { Component, Prop, Emit } from 'vue';

@Component
export default class ChildComponent extends Vue {
  @Emit('parent-event') callParentMethod() {
    this.$emit('parent-event', /* 可选的参数 */);
  }
}
</script>

在父组件中，你需要监听这个事件，并定义接收方法：

<template>
  <ChildComponent @parent-event="handleChildMethod"></ChildComponent>
</template>

<script lang="ts">
import { Component, Prop, methods } from 'vue';
import ChildComponent from './ChildComponent.vue';

@Component
export default class ParentComponent extends Vue {
  // 定义处理子组件事件的方法
  @methods
  handleChildMethod(data: any) {
    console.log('子组件调用了父组件的 method:', data);
    // 在这里处理数据或执行其他操作
  }
}
</script>