Vue 3 中的 defineEmits：组件事件声明详解

在 Vue.js 3 中，defineEmits 选项用于在组件中声明可触发的事件。通过 defineEmits，您可以明确告诉 Vue 组件可以向父组件发送哪些事件，从而实现父子组件之间的通信。

如何使用 defineEmits

defineEmits 选项接受一个字符串数组作为参数，数组中的每个字符串代表一个事件名称。

import { defineEmits } from 'vue';

export default {
  emits: ['click', 'submit'],
  // ...其他组件选项
}

在上面的例子中，组件声明了两个事件：'click' 和 'submit'。这意味着该组件可以使用 $emit 方法触发这两个事件，父组件可以通过 v-on 指令监听这些事件。

使用 $emit 触发事件

在组件内部，您可以使用 $emit 方法触发已声明的事件，并传递数据给父组件。

<template>
  <button @click='handleClick'>点击我</button>
</template>

<script>
import { defineEmits } from 'vue';

export default {
  emits: ['my-event'],
  methods: {
    handleClick() {
      this.$emit('my-event', '一些数据');
    }
  }
}
</script>

在父组件中监听事件

在父组件中，您可以使用 v-on 指令监听子组件触发的事件，并执行相应的操作。

<template>
  <MyComponent @my-event='handleEvent' />
</template>

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

export default {
  components: {
    MyComponent
  },
  methods: {
    handleEvent(data) {
      console.log('收到了来自子组件的数据：', data);
    }
  }
}
</script>

defineEmits 的优势

提高代码可读性： 明确声明事件接口，使代码更易于理解和维护。
更好的类型推断： 在 TypeScript 项目中，defineEmits 可以提供更好的类型推断，减少错误。

总结

defineEmits 是 Vue.js 3 中一个非常实用的选项，它可以帮助您更好地组织和管理组件之间的通信。通过使用 defineEmits，您可以编写出更清晰、更易维护的 Vue.js 应用程序。