学习要点:
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)整理发布!