相比于 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>
实现效果：
