vue3中setup语法糖使用emit

在Vue 3中，通过使用`setup`函数，我们可以使用`emit`来实现组件间的通信。下面是一个使用`setup`和`emit`的简单示例：

// Parent.vue（父组件）
<template>
  <div>
    <Child @customEvent="handleCustomEvent" />
  </div>
</template>

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

export default {
  components: {
    Child
  },
  methods: {
    handleCustomEvent(payload) {
      console.log(payload);
    }
  }
};
</script>

// Child.vue（子组件）
<template>
  <div>
    <button @click="handleClick">触发事件</button>
  </div>
</template>

<script>
export default {
  setup(props, { emit }) {
    const handleClick = () => {
      emit('customEvent', '自定义事件触发');
    };

    return {
      handleClick
    };
  }
};
</script>

在上面的示例中，父组件`Parent.vue`通过在子组件`Child.vue`上使用`@customEvent`监听自定义事件。子组件中的`setup`函数中定义了一个`handleClick`函数，当按钮被点击时，通过`emit`函数触发了一个名为`customEvent`的自定义事件，并传递了一个字符串作为参数。

在父组件中，我们通过`@customEvent="handleCustomEvent"`将自定义事件与父组件的`handleCustomEvent`方法进行关联，当子组件触发自定义事件时，父组件的`handleCustomEvent`方法会被调用，并且可以接收到子组件传递的参数。

这就是在Vue 3中使用`setup`和`emit`进行组件间通信的简单示例。希望能对你有所帮助！如果还有其他问题，请随时提问。