vue3中的子组件调用父组件的函数

在 Vue3 中，子组件可以通过 `emits` 选项向父组件发送自定义事件，从而调用父组件中的方法。

具体实现步骤如下：

1. 在父组件中定义一个方法，用于接收子组件发送的自定义事件。

2. 在子组件中通过 `emits` 选项定义一个自定义事件。

3. 在子组件中通过 `$emit` 方法触发自定义事件并传递参数。

以下是一个示例代码：

父组件：

<template>
  <div>
    <ChildComponent @custom-event="handleCustomEvent"></ChildComponent>
  </div>
</template>

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

export default {
  components: {
    ChildComponent,
  },
  methods: {
    handleCustomEvent(param) {
      console.log(param); // 输出子组件传递过来的参数
      // 调用父组件中的其他方法
    },
  },
};
</script>

子组件：

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

<script>
export default {
  emits: ['custom-event'], // 定义自定义事件
  methods: {
    handleClick() {
      const param = '这是子组件传递的参数';
      this.$emit('custom-event', param); // 触发自定义事件并传递参数
    },
  },
};
</script>

当子组件中的按钮被点击时，会触发自定义事件并将参数传递给父组件中的 `handleCustomEvent` 方法。在该方法中，你可以根据传递过来的参数做出相应的处理，并且可以调用父组件中的其他方法。