相比于 vue 2.x ，在自定义事件时 vue 3.x 提供一个 emits 选项，和现有的 props 选项类似。这个选项可以用来定义一个组件可以向其父组件触发的事件。参考 >> 官方说明

1. 自定义事件概述

---

在封装组件时，为了让组件的使用者可以 监听到组件内状态的变化，此时需要用到组件的 自定义事件 。

2. 自定义事件 3 个使用步骤

---

在封装组件时:

• 声明 自定义事件
• 触发 自定义事件

在使用组件时：

• 监听 自定义事件

>> 声明自定义事件

开发者为自定义组件封装的 自定义事件，必须事先在 emits 节点中声明：

<!-- 子组件 Count -->
<script>
export default {
  emits: ['numchange'],
}
</script>

>> 触发自定义事件

在 emits 节点下声明的自定义事件，可以通过 this.$emit('自定义事件的名称') 方法进行触发。

<!-- 子组件 Count -->
<template>
  <h3>Count 子组件 --- {{ num }}</h3>
  <button type="button" class="btn btn-danger" @click="add">+1</button>
</template>

<script>
export default {
  props: ['num'],
  emits: ['numchange'],
  methods: {
    add() {
      this.$emit('numchange', this.num + 1)
    }
  }
}
</script>

>> 监听自定义事件

在使用自定义的组件时，可以通过 v-on 的形式 监听自定义事件 。

<!-- 父组件 App -->
<template>
  <h3>App 根组件 --- {{ count }}</h3>
  <button type="button" class="btn btn-primary" @click="count += 1">+1</button>
  <count :num="count" @numchange="getNum"></count>
</template>

<script>
import Count from './Count.vue'
export default {
  data() {
    return {
      count: 0
    }
  },
  methods: {
    getNum(num) {
      this.count = num
    }
  },
  components: {
    Count
  }
}
</script>

实现效果：