vue3传参defineEmits

在Vue3中，使用defineEmits函数可以定义一个发射给父组件的方法。该方法接受一个字符串数组作为参数，数组内填写要发送数据的方法名称。在子组件中，可以使用emit函数来触发数据发送事件。emit函数的第一个参数是方法名，后面的参数是要传递给父组件方法的实参。下面是一个示例：

<!-- ParentComponent.vue -->
<template>
  <ChildComponent @eventName="handleEvent"></ChildComponent>
</template>

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

export default {
  components: {
    ChildComponent
  },
  methods: {
    handleEvent(data) {
      console.log(data);
    }
  }
}
</script>

<!-- ChildComponent.vue -->
<template>
  <button @click="emitEvent"></button>
</template>

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

const emit = defineEmits(['eventName']);

const emitEvent = () => {
  emit('eventName', 'Hello from child component!');
}
</script>

在这个示例中，父组件ParentComponent引入了子组件ChildComponent，并通过@eventName监听子组件触发的事件。子组件中使用defineEmits定义了一个eventName方法，然后在按钮的点击事件中调用emit函数来触发eventName方法，并传递了一个字符串参数。

当子组件中的按钮被点击时，emit函数会触发eventName方法，并将参数传递给父组件的handleEvent方法。父组件中的handleEvent方法会接收到子组件传递的数据，并进行处理。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* *3* [Vue3 defineProp传参以及defineEmits事件传递详细解释](https://blog.csdn.net/delete_you/article/details/125394856)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT0_1"}}] [.reference_item style="max-width: 50%"]
- *2* [vue3 defineEmits的使用](https://blog.csdn.net/weixin_47228574/article/details/128144067)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT0_1"}}] [.reference_item style="max-width: 50%"]
[ .reference_list ]