Vue3.0学习五:父子组件事件回调函数

748 阅读1分钟

概述

子组件回调父组件中定义的函数事件。

模块文件即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 }) }