概述
子组件回调父组件中定义的函数事件。
模块文件即templage中如何调用回调函数
子组件:
<!-- MyComponent -->
<button @click="$emit('someEvent')">click me</button>
<button @click="$emit('increaseBy', 1)"> Increase by 1 父组件: <MyComponent @some-event="callback" /> // 带参数的事件 function increaseCount(n) { count.value += n }
注意:事件命名采用了kebab-case 形式来监听,但事件函数仍然采用了amelCase 形式命名的事件。,另外事件可以参数,详见官方说明。
JavaScript中定义子组件如何回调父组件中定义的事件函数
回调函数调用结合TypeScript使用,用法一
回调函数调用结合TypeScript使用,用法二,带校验功能的回调
<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 }) }