setup 语法糖下怎么写

在 Vue 3.x 中，使用 `setup` 语法糖来编写组件逻辑。在 `setup` 函数中，可以通过 `emit` 函数将子组件中的方法暴露给父组件调用。具体步骤如下：

1. 在子组件中，使用 `setup` 函数来编写组件逻辑，并通过 `emit` 函数将子组件中的方法暴露给父组件调用。

// 子组件中
<template>
  <button @click="emitMethod">触发事件</button>
</template>

<script>
import { defineEmits, defineExpose } from 'vue'

export default {
  setup(props, { emit }) {
    const emitMethod = () => {
      emit('methodName', arg1, arg2)
    }

    defineExpose({ emitMethod })

    return {
      emitMethod
    }
  },
  emits: ['methodName']
}
</script>

在 `setup` 函数中，可以通过 `defineEmits` 函数来声明子组件所能够触发的事件，该函数返回一个包含子组件所能够触发的事件的对象。在 `defineExpose` 函数中，可以将子组件中的方法暴露给父组件调用。在 `return` 语句中，可以将子组件中的方法返回给模板中使用。

2. 在父组件中，通过给子组件添加一个 `ref` 属性来获取子组件实例，并使用 `v-on` 指令或 `@` 符号监听子组件触发的自定义事件，在事件回调函数中调用子组件中的方法。

// 父组件中
<template>
  <child-component ref="child" @methodName="handleMethod"></child-component>
</template>

<script>
export default {
  methods: {
    handleMethod(arg1, arg2) {
      // 在事件回调函数中调用子组件中的方法
      this.$refs.child.emitMethod()
    }
  }
}
</script>

在父组件中，可以通过 `v-on` 指令或 `@` 符号来监听子组件触发的自定义事件，并在事件回调函数中调用子组件中的方法。在回调函数中，可以通过参数来获取子组件传递的数据。在调用子组件中的方法时，可以通过 `this.$refs.child` 来获取子组件实例，然后调用子组件中的方法。

需要注意的是，在 `setup` 函数中，需要使用 `defineExpose` 函数将子组件中的方法暴露给父组件调用。另外，在 `setup` 函数中，`emits` 选项需要在组件选项外声明，否则会报错。