$emit

• 우선 부모컴포넌트부터 살펴보자.

<user-list :users="activeUsers" @list-projects="selectUser"></user-list>

<script setup>
...
const activeUsers = USER_DATA
const selectUser = (uid) => {
  selectedUser.value = activeUsers.find((usr) => usr.id === uid);
}
...
</script>

• 그리고 자식 컴포넌트이다.

<template>
  <base-container>
    <h2>Active Users</h2>
    <base-search @search="updateSearch" :search-term="enteredSearchTerm"></base-search>
    <div>
      <button @click="sort('asc')" :class="{selected: sorting === 'asc'}">Sort Ascending</button>
      <button @click="sort('desc')" :class="{selected: sorting === 'desc'}">Sort Descending</button>
    </div>
    <ul>
      <user-item
        v-for="user in displayedUsers"
        :key="user.id"
        :user-name="user.fullName"
        :id="user.id"
        @list-projects="$emit('list-projects', $event)"                              <= 요부분 말하는 거
      ></user-item>
    </ul>
  </base-container>
</template>

• 그런데 자식 컴포넌트에서 emit:[] 속성이라든지 defindEmit 함수든지 따로 정의하지 않았는데 에러없이 함수 drilling이 가능했다 무슨일일까?
  바로 $emit 에 있다.

• $emit 함수는 현재 컴포넌트에서 정의되지 않은 이벤트를 발생시키는 데 사용된다.
  따라서 $emit 키워드를 사용하면 부모 컴포넌트에서 이벤트를 받아들이고 필요한 처리를 수행할 수 있다.

즉, 이 코드는 defineEmit 함수를 사용하지 않고도 이벤트를 전달할 수 있는 Vue의 기능 중 하나인 $emit을 활용하고 있다고 볼 수 있다.