发出事件可以使子组件向父组件传播事件。考虑这样一个场景，我们有一个弹出组件，并且我们打算从父组件切换其可见性。当值例如 showPopup 设置为true时，弹出窗口应该显示，相反地，当值设置为false时，弹出窗口应该隐藏。这种基于事件的机制有助于组件之间的有效通信，促进它们行为的同步。

在这种情况下，有必要将事件向上传递给父组件。通过这样做，我们可以在父组件中处理此事件，通过将状态 showPopup 改为false来有效地关闭弹出窗口。从子组件向父组件发出事件的这种方法是管理这些场景的有价值的策略。它使我们能够以结构化的方式处理事件，从而实现涉及组件之间的无缝交互。

定义发出（DefineEmits）
为了触发事件，我们使用Vue.js提供的 defineEmits 宏API来声明要触发的事件。如下面的示例所示， defineEmits 宏接受要触发的事件列表。需要注意的是，声明应该仅在子组件中进行，而不是在父组件中进行。

声明发出的事件

// emit one event "close"
const emit = defineEmits(['close'])
// 堆代码 duidaima.com
// emit multiple events "close" and "submit"
const emit = defineEmits(['close','submit'])

发出和监听事件
我们还可以在事件中传递值。例如，当我们发出某些事件时，可能希望传递一些值。我们可以在发出事件参数后，将值作为第二个参数传递进去。在下面的示例中，我们在子组件中呈现一些项目，并使用其索引值向父组件发出 itemClicked 。

子组件

<script setup lang="ts">
import { ref } from 'vue';
const items = ref(['Java','Python','JavaScript','Rust','Go','C','OCalm'])
const emit = defineEmits(['itemClicked'])
function selectItem(index: number) {
  emit('itemClicked', index);
}
</script>

<template>
  <div>
    <ul>
      <li class="list" v-for="(item, index) in items" :key="index" @click="selectItem(index)">
        {{ item }}
      </li>
    </ul>
  </div>
</template>

<style scoped>
ul {
  display: flex;
  padding: 0;
  list-style: none;
  column-gap: 4px;
}
.list {
  padding: 10px 18px;
  border: 1px solid darkgray; 
  margin: 4px;
  border-radius: 5px;
  cursor: pointer;
}

父组件
在父组件中，我们导入 ChildComponent 并将其包含在模板中。然后，我们可以使用 v-on 指令（或 @ 的简写）来捕获 ChildComponent 发出的自定义事件。我们传入 handleEmittedEvent 方法来接收发出的值（在这种情况下是点击项的索引），并更新父组件中的 emittedValue 数据属性。

<template>
  <div>
  <p>Index of Clicked Item is {{emittedValue}}</p>

  <ChildComp @item-clicked="handleEmittedEvent" />
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import ChildComp from './ChildComp.vue'
const emittedValue = ref<number | null >()
function handleEmittedEvent(index: number){
    emittedValue.value = index
}
</script>

处理自定义发射事件时，请记住使用 kebab-case 命名约定来命名您的指令。这有助于在您的 Vue 组件中保持一致性和可读性。

我们已经探索了在Vue.js中发出事件的过程以及如何使用自定义指令在父组件中处理它们。在各种场景中发出事件至关重要，因为它可以增强应用程序的灵活性和效率。