vue3 自定义事件的使用

在 Vue3 中，可以使用 `emits` 属性来定义组件可以触发的自定义事件。具体步骤如下：

1. 在组件中使用 `emits` 定义可以触发的自定义事件：

<template>
  <button @click="handleClick">点击</button>
</template>

<script>
export default {
  emits: ['custom-click'],
  methods: {
    handleClick() {
      // 触发自定义事件
      this.$emit('custom-click')
    }
  }
}
</script>

在上述代码中，我们使用 `emits` 定义了一个名为 `custom-click` 的自定义事件。

2. 在使用该组件时，可以通过 `v-on` 指令来监听该自定义事件：

<template>
  <CustomButton @custom-click="handleCustomClick" />
</template>

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

export default {
  components: {
    CustomButton
  },
  methods: {
    handleCustomClick() {
      console.log('自定义事件被触发了')
    }
  }
}
</script>

在上述代码中，我们使用 `v-on` 指令来监听 `custom-click` 自定义事件，并在事件被触发时执行 `handleCustomClick` 方法。

需要注意的是，如果你使用 TypeScript 编写 Vue3 组件，需要在组件中引入 `defineEmits` 函数，并使用该函数来定义 `emits` 属性。例如：

<template>
  <button @click="handleClick">点击</button>
</template>

<script lang="ts">
import { defineEmits } from 'vue'

export default {
  emits: defineEmits(['custom-click']),
  methods: {
    handleClick() {
      // 触发自定义事件
      this.$emit('custom-click')
    }
  }
}
</script>

希望能够帮助到你！