>[success] # $emit 1. 子组件传递给父组件时候，一般操作步骤如下 * 需要在子组件中定义好在某些情况下触发的事件名称； * 在父组件中以`v-on`的方式传入要监听的事件名称，并且绑定到对应的方法中； * 在子组件中发生某个事件的时候，根据事件名称触发对应的事件 2. `vue3.x `比 `2.x `多一点需要像声明`props` 一样，也需要在`emit `属性声明 `emit`事件 3. 声明形式有两种一种是**数组形式**，一种是**对象验证形式** >[danger] ##### 数组形式 1. 注意`emits `注册是 `this.$emit` 中第一个参数即映射方法名  >[danger] ##### 自定义事件的参数和验证 1. 在使用`$emit `时候会有参数传值，如果你想对参数传值进行校验可以写如下 2. 使用参数校验形式时候 必须返回一个布尔值来指示事件是否生效 * 校验必须index 为number 类型  * 官方案例 ~~~ app.component('custom-form', { emits: { // 没有验证 因为是参数校验zzz 没有参数因此设置null zzz: null, // 验证 submit 事件 submit: ({ email, password }) => { if (email && password) { return true } else { console.warn('Invalid submit event payload!') return false } } }, methods: { submitForm(email, password) { this.$emit('submit', { email, password }) this.$emit('zzz') } } }) ~~~ >[danger] ##### 命名 1. HTML 中的`attribute`名是大小写不敏感'的，所以浏览器会把所有**大写字符解释为小写字符**,使用`DOM`中的模板时`camelCase`(驼峰命名法) 的`emit`名需要使用其等价的`kebab-case`(短横线分隔命名) 命名； 2. 当然如果**使用的是vuecli webpack vite 等一类工具时**不存在上面问题，因为会将`vue`文件重新转译 >[danger] ##### 官网讲解位置 [参考](https://cn.vuejs.org/guide/components/events.html)