vue3子传父defineEmits

在Vue 3中，子组件可以通过 `defineEmits` 方法来定义事件，然后将事件发送给父组件。下面是一个示例：

// 子组件
import { defineEmits } from 'vue';

const emitEvents = defineEmits(['myEvent']);

export default {
  emits: emitEvents,
  methods: {
    handleClick() {
      this.$emit('myEvent', 'Hello from child component!');
    }
  }
};

在子组件中，我们使用 `defineEmits` 来定义一个名为 `myEvent` 的事件。然后，在子组件的方法中，我们使用 `$emit` 方法来触发该事件，并传递一个消息作为参数。

<!-- 父组件 -->
<template>
  <div>
    <child-component @myEvent="handleEvent"></child-component>
  </div>
</template>

<script>
export default {
  methods: {
    handleEvent(message) {
      console.log(message); // 输出：Hello from child component!
    }
  }
};
</script>

在父组件中，我们通过监听 `myEvent` 事件来接收子组件发送的消息，并在 `handleEvent` 方法中处理该消息。

这样，子组件就可以通过 `this.$emit` 发送事件给父组件，并传递任意的数据。注意，在Vue 3中，直接使用 `$emit` 这种写法已经被废弃了，需要使用 `defineEmits` 来显式地定义事件。