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

Question

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

Answer 1

张轩 2020-10-04 21:37:45

同学你好 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
      }
    }
  },

Answer 2

慕无忌0198294 2020-10-04 17:02:08

设置为对象类型的话，应该是要对emit事件的参数进行验证

• 提问者 Jack_WJQ #1

  你这个中文的文档在哪里可以看到？

Answer 3

慕无忌0198294 2020-10-04 16:58:18

这应该是个建议