1. 什么是自定义事件
在封装组件时，为了让组件的使用者可以监听到组件内状态的变化，此时需要用到组件的自定义事件。
2. 自定义事件的 3 个使用步骤
在封装组件时：
① 声明自定义事件
② 触发自定义事件
在使用组件时：
③ 监听自定义事件
2.1 声明自定义事件
开发者为自定义组件封装的自定义事件，必须事先在 emits 节点中声明，示例代码如下：
<template>
<h2>count组件</h2>
{{ count }}
<button @click="add">+1</button>
</template>
export default {
emits:['GetCount'],
}
2.2 触发自定义事件
在 emits 节点下声明的自定义事件，可以通过 this.$emit(‘自定义事件的名称’) 方法进行触发，示例代码如下：
<template>
<h2>count组件</h2>
{{ count }}
<button @click="add">+1</button>
</template>
methods:{
add(){
this.count++
this.$emit('GetCount',this.count)
}
}
2.3 监听自定义事件以及传参
在使用自定义的组件时，可以通过 v-on 的形式监听自定义事件。自定义事件传参，在调用 this.$emit() 方法触发自定义事件时，可以通过第 2 个参数为自定义事件传参。
示例代码如下：
<template>
<h1>app根组件</h1>
<div>
<count @GetCount="add"></count>
</div>
</template>
<script>
import count from './count.vue'
export default {
components:{
count
},
methods:{
add(e){
console.log(e)
}
}
}
</script>
参考：