Question

emits 选项，和现有的 props 选项类似。这个选项可以用来定义一个组件可以向其父组件触发的事件。

并且， emits 选项中列出的事件不会从组件的根元素继承，也将从 $attrs property 中移除，否则将随 $attrs 绑定到组件的根节点上

emits 可以是数组或对象，从组件触发自定义事件，emits 可以是简单的数组，也可以是对象，后者允许配置事件验证。

在对象语法中，每个 property 的值可以为 null 或验证函数。验证函数将接收传递给 $emit 调用的其他参数。如果 this.$emit('foo',1) 被调用， foo 的相应验证函数将接收参数 1 。验证函数应返回布尔值，以表示事件参数是否有效。

const app = createApp({})

// 数组语法
app.component('todo-item', {
  emits: ['check'],
  created() {
  this.$emit('check')
  }
})

// 对象语法
app.component('reply-form', {
  emits: {
  // 没有验证函数
  click: null,
  // 带有验证函数
  submit: payload => {
    if (payload.email && payload.password) {
    return true
    } else {
    console.warn(`Invalid submit event payload!`)
    return false
    }
  }
  }
})

对于向其父组件透传原生事件的组件来说，这会导致有两个事件被触发：

<template>
  <button v-on:click="$emit('click', $event)">OK</button>
</template>
<script>
export default {
  emits: [] // 不声明事件
}
</script>

当一个父级组件拥有 click 事件的监听器时：

<my-button v-on:click="handleClick"></my-button>

该事件现在会被触发两次:

• 一次来自 $emit() 。
• 另一次来自应用在根元素上的原生事件监听器。