学习要点：
1.自定义事件
2.验证抛出的事件
本节课我们来开始学习 Vue3.x 的组件中自定义事件的方法。
一．自定义事件
1. 系统内置的事件比如：click、change 等等，也可以自定义事件；
2. 而组件中的自定义事件，可以满足之前无法实现的需求：更改父组件的值；
3. 由于这块知识点比较绕，第一次学习可能会摸不招头脑，所以，我按照步骤走一遍；
(1). 先创建两个子组件 htmlA 和 htmlB，都用 props 加载父组件的内容；
const htmlA = {...}
const htmlB = {...}
// 父组件绑定两个子组件
components : {
'html-a' : htmlA,
'html-b' : htmlB
},
(2). 在其中一个子组件，比如 htmlA 中定义一个自定义事件，和 props 的定义方式一样；
// 定义子组件的自定义事件
emits : ['child-event'],
(3). 通过子组件中使用 v-on 以自定义事件去执行父组件的一个方法；
<html-a v-on:child-event="parentFn" v-bind:parent-message="message">html-a>
(4). 在子组件模板中添加一个按钮，点击后来执行这个自定义事件，并抛出一个值；
// button 按钮点击后触发一个方法，方法里执行自定义事件，并抛值
template : `
`,
//方法
methods : {
childClick(message) {
this.$emit('child-event', message)
}
}
(5). 最后一步了：执行父组件的一个方法，并获取子组件传递的值，然后更改父组件内容；
//这里是父组件的方法
methods : {
parentFn(value) {
this.message = value
console.log('子组件触发了我~')
}
}
PS：一套流程下来，我们终于可以修改父组件的内容了；内容较绕，需要多多理清；
二．验证抛出的事件
1. 这个和 props 用法的一样的，具体如下：
emits : {
// 不验证
//'child-event' : null
// 复杂验证
'child-event' : (value) => {
if (value !== 'abc') {
console.log('验证失败~')
return false
} else {
return true
}
}
},
PS：文档上，这块内容分了两个部分，一个是“基础组件”，另一个是“深入组件”都有讲解；
本文由:兰州启点网络（
www.lzqidian.com)整理发布!
启点CMS演示地址及账号
