vue3 使用setup语法糖后子组件调用父组件中的方法

在Vue 3中，使用`setup`语法糖来定义组件时，可以通过`emit`函数向父组件发送事件，从而调用父组件中的方法。具体步骤如下：

1. 在父组件中定义一个方法，该方法将在子组件中被调用：

<template>
  <child-component @custom-event="handleCustomEvent"></child-component>
</template>

<script>
export default {
  methods: {
    handleCustomEvent() {
      // 子组件向父组件发送事件后的处理逻辑
    }
  }
}
</script>

2. 在子组件中，通过`props`选项接收父组件传递的方法，并通过`emit`函数向父组件发送事件：

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

<script>
export default {
  props: {
    customEvent: {
      type: Function,
      required: true
    }
  },
  setup(props, { emit }) {
    const handleClick = () => {
      emit('custom-event')
    }

    return {
      handleClick
    }
  }
}
</script>

在子组件中，我们通过`props`选项接收父组件传递的`customEvent`方法，并通过`emit`函数向父组件发送`custom-event`事件。在`setup`函数中，我们定义了`handleClick`方法，当子组件中的按钮被点击时，会触发该方法，从而通过`emit`函数向父组件发送`custom-event`事件。

当父组件接收到`custom-event`事件时，会执行`handleCustomEvent`方法，从而实现了子组件调用父组件中的方法。