属性 emits 的作用是什么？emits 的用法能否详细介绍一下？

来源：5-8 ValidateForm 编码第一部分 - 使用插槽 slot

Jack_WJQ

2020-10-04

老师您好，在课程里面看到属性当中可以设置一个 emits 数组，也可以直接 context.emit 事件，我测试了一下，在 emits 里不添加 emit 的事件名称，父组件同样可以侦听到 emit 的事件，那这个 emits 属性的作用是什么？您在课程中也说到 emits 可以设置为对象，这个属性的用法又有哪些，可以详细讲一下嘛？建议老师能够将 Vue 3.0 当中的一些新的东西都详细讲解一下~

写回答

3回答

张轩

2020-10-04

同学你好 emits 这个属性是 vue3 新添加的文档在这里 https://v3.vuejs.org/guide/component-custom-events.html#defining-custom-events 这些内容在 3-15 Teleport 第二部分都有详解的，建议你再看一遍欧

它有几个作用 1 明确这个组件的事件都有什么，建议组件都写上，不写也不会出现错误（这就是你测试不加也可以运行的原因）

2 可以享受类型推论 - 当你 context.emit 的时候，第一个参数会字段推断成你定义的 emits 数组中的值，可以自动补全。

3 验证，可以添加验证，楼下的截图已经说明了。事件发送之前可以添加验证函数，返回布尔值。

  emits: {
    // No validation
    click: null,

    // Validate submit event
    submit: ({ email, password }) => {
      if (email && password) {
        return true
      } else {
        console.warn('Invalid submit event payload!')
        return false
      }
    }
  },