组件事件
组件事件 此章节假设你已经看过了组件基础。若你还不了解组件是什么，请先阅读该章节。
触发与监听事件 在组件的模板表达式中，可以直接使用 $emit 方法触发自定义事件 (例如：在 v-on 的处理函数中)：
template
$emit() 方法在组件实例上也同样以 this.$emit() 的形式可用：
jsexport default {
methods: {
submit() {
this.$emit('someEvent')
}
}
}父组件可以通过 v-on (缩写为 @) 来监听事件：
template
template
TIP
和原生 DOM 事件不一样，组件触发的事件没有冒泡机制。你只能监听直接子组件触发的事件。平级组件或是跨越多层嵌套的组件间通信，应使用一个外部的事件总线，或是使用一个全局状态管理方案。
事件参数 有时候我们会需要在触发事件时附带一个特定的值。举例来说，我们想要
template
Increase by 1
然后我们在父组件中监听事件，我们可以先简单写一个内联的箭头函数作为监听器，此函数会接收到事件附带的参数：
template
template
jsmethods: {
increaseCount(n) {
this.count += n
}
}jsfunction increaseCount(n) {
count.value += n
}TIP
所有传入 $emit() 的额外参数都会被直接传向监听器。举例来说，$emit('foo', 1, 2, 3) 触发后，监听器函数将会收到这三个参数值。
声明触发的事件 组件可以显式地通过 defineEmits() 宏emits 选项来声明它要触发的事件：
vue我们在 中使用的 $emit 方法不能在组件的 defineEmits() 宏不能在子函数中使用。如上所示，它必须直接放置在 如果你正在搭配 TypeScript 使用 TypeScript 用户请参考：如何为组件所抛出事件标注类型
jsexport default {
emits: {
submit(payload: { email: string, password: string }) {
// 通过返回值为 `true` 还是为 `false` 来判断
// 验证是否通过
}
}
}TypeScript 用户请参考：如何为组件所抛出的事件标注类型。
尽管事件声明是可选的，我们还是推荐你完整地声明所有要触发的事件，以此在代码中作为文档记录组件的用法。同时，事件声明能让 Vue 更好地将事件和透传 attribute 作出区分，从而避免一些由第三方代码触发的自定义 DOM 事件所导致的边界情况。
TIP
如果一个原生事件的名字 (例如 click) 被定义在 emits 选项中，则监听器只会监听组件触发的 click 事件而不会再响应原生的 click 事件。
事件校验 和对 props 添加类型校验的方式类似，所有触发的事件也可以使用对象形式来描述。
要为事件添加校验，那么事件可以被赋值为一个函数，接受的参数就是抛出事件时传入 this.$emitemit 的内容，返回一个布尔值来表明事件是否合法。
vuejsexport default {
emits: {
// 没有校验
click: 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 })
}
}
}