vue3 ts 子组件调用父组件的方法

在Vue3中，子组件想要调用父组件的方法，可以通过使用`$emit`方法和自定义事件实现。首先，在父组件中定义一个方法，然后将该方法作为属性传递给子组件。在子组件中，可以通过`this.$emit`来触发父组件中的方法。例如，父组件中定义了一个方法`handleClick`，子组件中想要调用该方法，可以使用以下步骤：

1. 在父组件中定义一个方法`handleClick`，在该方法中实现所需的逻辑。
2. 将父组件的方法作为属性传递给子组件，在父组件的模板中使用`v-on`指令或简写的`@`来监听子组件触发的事件，并调用父组件的方法。
3. 在子组件中使用`this.$emit`触发父组件的方法。使用`$emit`时，第一个参数是事件名称，第二个参数是传递给父组件方法的数据。

下面是一个示例代码：

// 父组件
<template>
  <div>
    <ChildComponent @child-click="handleClick" />
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent,
  },
  methods: {
    handleClick(data) {
      // 在这里实现所需的逻辑
    },
  },
};
</script>

// 子组件
<template>
  <button @click="handleClick">调用父组件方法</button>
</template>

<script>
export default {
  methods: {
    handleClick() {
      // 在这里触发父组件的方法
      this.$emit('child-click', data);
    },
  },
};
</script>

在上述示例中，子组件中的按钮点击事件将通过`$emit`方法触发`child-click`事件，并传递给父组件的`handleClick`方法。父组件中的`handleClick`方法接收到子组件传递的数据后，可以进行相应的操作。<span class="em">1</span><span class="em">2</span>