做网站 点击跳转,东莞哪里有做网站的,广电基础设施建设官方网站,空间设计工作室网站一、语法(props)
第一步#xff1a;在组件模板表达式中#xff0c;可以直接用$emit()方法触发自定义事件#xff0c;
!-- MyComponent --
button click$emit(someEvent)Click Me/button
第二步父组件可以通过 v-on (缩写为 ) 来监听…一、语法(props)
第一步在组件模板表达式中可以直接用$emit()方法触发自定义事件
!-- MyComponent --
button click$emit(someEvent)Click Me/button
第二步父组件可以通过 v-on (缩写为 ) 来监听事件
MyComponent some-eventcallback ///组件的事件监听器也支持 .once 修饰符
MyComponent some-event.oncecallback /
注意
1.1、像组件与prop一样事件名字也提供了自动格式转换上面触发了一个camelCase形式命名的事件但在父组件中可以使用kebab-case形式监听
1.2、和原生 DOM 事件不一样组件触发的事件没有冒泡机制。你只能监听直接子组件触发的事件。平级组件或是跨越多层嵌套的组件间通信应使用一个外部的事件总线或是使用一个全局状态管理方案(vuex)。
二、事件参数
// 子组件
button click$emit(increaseBy, 1)Increase by 1
/button// 父组件
// 第一种可以先简单写一个内联的箭头函数作为监听器此函数会接收到事件附带的参数
MyButton increase-by(n) count n /// 第二种还可以用一个组件方法来作为事件处理函数
MyButton increase-byincreaseCount /
function increaseCount(n) {count.value n
}
注意 所有传入 $emit() 的额外参数都会被直接传向监听器。举例来说$emit(foo, 1, 2, 3) 触发后监听器函数将会收到这三个参数值。
二、声明触发事件
组件可以显式地通过 defineEmits() 宏来声明它要触发的事件
script setupdefineEmits([inFocus, submit])
/script
注意 1. 我们在 template 中使用的 $emit 方法不能在组件的 script setup 部分中使用但 defineEmits() 会返回一个相同作用的函数供我们使用
script setup
const emit defineEmits([inFocus, submit])function buttonClick() {emit(submit)
}
/script 2. defineEmits() 宏不能再子函数中使用必须在script setup的顶级作用域下 3、如果显示的使用setup函数不使用script setup则事件需要通过emits选项来定义emit函数也被暴露在setup的上下文对象上 export default { emits: [inFocus, submit], setup(props, ctx) { ctx.emit(submit) } } 3、emits 选项和 defineEmits() 宏还支持对象语法
四、事件校验 和对 props 添加类型校验的方式类似所有触发的事件也可以使用对象形式来描述。 要为事件添加校验那么事件可以被赋值为一个函数接受的参数就是抛出事件时传入 emit 的内容返回一个布尔值来表明事件是否合法。
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
