vue3中 defineEmits 子传父

在Vue3中，`defineEmits` 是 Vue3 Composition API 中用于管理组件间的通信的一种方法，特别针对父子组件间的事件传递进行了优化。它是一个静态方法，用于声明一个组件会触发哪些自定义事件，并接收哪些参数。当你在父组件使用 `emits` 属性接收子组件的事件时，`defineEmits` 避免了直接暴露大量的 prop，使得数据流更加清晰且易于维护。

例如，在子组件中：

import { defineEmits } from 'vue'

export default {
  emits: defineEmits(['updateValue', 'closeModal'])
  // ...
}

这表示这个子组件只会触发 `updateValue` 和 `closeModal` 两个事件。而在父组件中，你可以这样接收并处理子组件发出的事件：

<template>
  <ChildComponent @updateValue="handleUpdate" @closeModal="handleClose"/>
</template>

<script>
import ChildComponent from './ChildComponent'
import { ref } from 'vue'

export default {
  components: {
    ChildComponent
  },
  methods: {
    handleUpdate(value) {
      console.log('Received updated value:', value)
    },
    handleClose() {
      console.log('Closed modal')
    }
  }
}
</script>

这里 `@updateValue` 和 `@closeModal` 就是通过 `defineEmits` 定义的事件名称，父组件可以通过它们监听子组件的行为。