vue3 props传递函数

Vue3 使用 Props 传递函数的方法及示例
在 Vue 3 中，props 不仅能用于传递简单数据类型（如字符串、数字），还可以用来传递复杂的数据结构，比如对象和数组，甚至可以传递函数。当希望子组件能够调用父组件定义的功能时，这显得尤为重要。
定义并传递函数作为 prop
为了使子组件能够触发来自父组件的行为，在父组件中定义一个方法，并将其作为一个 prop 绑定到子组件上：
<template>
<!-- 子组件 -->
<ChildComponent @child-event="handleEventFromChild" />
</template>

<script>
import ChildComponent from './components/ChildComponent.vue';

export default {
components: {
ChildComponent,
},
methods: {
handleEventFromChild(message) {
console.log(`Message received from child component: ${message}`);
}
}
};
</script>
登录后复制
在这个例子中，@child-event 是一种监听自定义事件的方式；而实际上要传递的是一个名为 handleEventFromChild 的回调函数给子组件[^4]。
接收并通过 emit 调用该函数
接着，在子组件内部接收这个函数形式的 prop 并通过 $emit() 方法来触发它：
<!-- ChildComponent.vue 文件内容如下 -->

<template>
<button @click="$emit('child-event', 'Hello Parent!')">Click Me!</button>
</template>

<script setup>
// 如果使用 script setup，则不需要 import 和 export，默认暴露所有局部变量
defineProps({
// 这里声明接受的 props 参数名及其类型
onButtonClick: Function, // 假设这是我们要传递的那个函数
});
</script>
登录后复制
这里需要注意两点：一是如果采用 <script setup> 新语法糖的话可以直接利用 defineProps() 来简化代码编写过程；二是虽然上面的例子展示了如何直接将函数命名为 onButtonClick ，但是在实际项目实践中建议保持一致性，即沿用父级传入的名字 handleEventFromChild 或者其他更具描述性的名称[^1]。
验证 Prop 函数的有效性
对于任何类型的 prop，都可以设置其预期类型以及其他约束条件。针对函数类型的 prop 可以这样做：
defineProps({
callbackFunction: {
type: Function,
required: true,
validator(value) {
return typeof value === 'function';
}
}
})
登录后复制
这段配置确保了只有当 callbackFunction 实际上传递了一个有效的 JavaScript 函数时才会被接受。