触发和监听

• 使用 kebab-case 命名事件 自动转化： 如果你在子组件中触发了一个叫做 myEvent （小驼峰）的事件，那么在父组件中你可以使用 v-on:my-event 或者 @my-event 的方式来监听这个事件，即使子组件中触发事件时使用的是 myEvent。
• 监听事件可以使用 .once 修饰符 只能监听直接子组件触发的事件。平级组件或者跨组件通信应当使用全局状态管理或者外部事件总线。

事件参数

$emit('emitName',a) 触发事件可以传一个参数，这个参数会被传递给监听器触发的箭头函数：

<MyButton @increase-by="(n) => count += n" />
-->或者传递给组件方法的参数
<MyButton @increase-by="increaseCount" />

function increaseCount(n) {
  count.value += n
}

声明组件触发事件

监听器通过 @ 创建的事件只能在 template 中被触发，如果要在 script 中触发的话需要声明该事件：

const emit = defineEmits(['inFocus', 'submit'])

通过 emit 会返回一个能够触发这个事件的函数，只要使用 emit('emitName') 即可。

• 如果定义了一个原生 html 拥有的事件，则 vue 会覆盖掉这个事件，只监听自定义的事件。

事件校验

<script setup>
const emit = defineEmits({
  // 没有校验
  click: null,

  // 校验 submit 事件
  submit: ({ email, password }) => {
    if (email && password) { //校验这两个值是否存在，而不是未定义或者其他的什么
      return true
    } else {
      console.warn('Invalid submit event payload!')
      return false //阻止事件发射
    }
  }
})

function submitForm(email, password) {
  emit('submit', { email, password })
}
</script>