Vue3 defineEmits 代码示范

import { defineEmits } from 'vue'

const MyComponent = {
  setup() {
    // defineEmits 接受一个字符串数组作为参数
    const emits = defineEmits(['myEvent'])

    // 使用 emits 对象触发自定义事件
    function handleClick() {
      emits.myEvent('some data')
    }

    return {
      handleClick
    }
  },
  template: `
    <button @click="handleClick">Click me</button>
  `
}

在上面的代码中，我们首先使用 defineEmits 方法定义了一个名为 "myEvent" 的自定义事件。然后我们在 handleClick 函数中使用 emits 对象触发这个事件，并传递了一些数据。

在父组件中可以监听这个事件

<template>
  <MyComponent @myEvent="handleMyEvent" />
</template>

<script>
import MyComponent from './MyComponent.vue'

export default {
  components: {
    MyComponent
  },
  methods: {
    handleMyEvent(data) {
      console.log(data) // 'some data'
    }
  }
}
</script>