本文讲解如何通过将函数作为 prop 传递，实现 v-for 渲染的每个组件绑定独立的点击处理逻辑，避免硬编码重复调用，提升代码可维护性与灵活性。
本文讲解如何通过将函数作为 prop 传递，实现 v-for 渲染的每个组件绑定独立的点击处理逻辑，避免硬编码重复调用，提升代码可维护性与灵活性。
在 Vue 3 组合式 API 中，函数完全可以作为 props 传递——这是合法且推荐的做法。关键在于：子组件接收函数 prop 后，直接在事件处理器中调用它（而非 emit），从而让每个列表项触发各自专属的业务逻辑。
首先，更新你的 SideNavbarListItem.vue 组件，显式声明 fun 为 Function 类型的 prop：
<script setup>
import { Icon } from '@iconify/vue'
import { defineProps } from 'vue'
const props = defineProps({
icon: String,
name: String,
fun: {
type: Function,
required: true // 确保每个 item 都提供点击行为
}
})
</script>然后，在模板中直接将 @click 绑定到 props.fun：
<template>
<div
@click="props.fun"
class="m-3 mx-auto flex h-fit max-h-fit w-fit cursor-pointer flex-nowrap gap-5 whitespace-nowrap rounded-3xl border-2 border-gray-200 px-14 py-2 font-semibold shadow-xl transition-all duration-300 hover:scale-105 hover:bg-black hover:text-white hover:shadow-2xl"
>
<Icon :icon="props.icon" width="30" height="30" />
{{ props.name }}
</div>
</template>父组件中定义对应函数，并构建带函数引用的列表数据：
立即学习“前端免费学习笔记（深入）”；
<script setup>
import { reactive } from 'vue'
import SideNavbarListItem from './SideNavbarListItem.vue'
const fun1 = () => {
console.log('跳转至 Resources 页面')
// 例如：router.push('/resources')
}
const fun2 = () => {
console.log('打开 Favorites 面板')
// 例如：showFavoritesPanel.value = true
}
const sideNavbarListItems = reactive([
{ name: 'Resources', icon: 'clarity:atom-solid', fun: fun1 },
{ name: 'Favorites', icon: 'tabler:stars', fun: fun2 }
])
</script>
<template>
<div class="flex flex-col items-center">
<SideNavbarListItem
v-for="item in sideNavbarListItems"
:key="item.name"
:icon="item.icon"
:name="item.name"
:fun="item.fun"
/>
</div>
</template>✅ 优势说明：
- ✅ 简洁清晰：无需在模板中写多个 <component @click="...">，统一用 v-for 驱动；
- ✅ 类型安全：TypeScript 可校验 fun 是否为函数；
- ✅ 职责分明：业务逻辑留在父组件，子组件仅负责渲染与触发；
- ✅ 可复用：同一 SideNavbarListItem 组件可被任意含 fun 的数据驱动。
⚠️ 注意事项：
- 不要混用 emits 和函数 prop 实现相同目标（如既传 fun 又 emit('customEvent')），这会造成逻辑冗余和耦合；
- 若需向父组件传递参数（如 item.id），可在调用时使用箭头函数：@click="() => item.fun(item.id)"，但更推荐将参数内聚在 fun 定义中（如 fun: () => fun1(item.id)）；
- :key 强烈建议使用唯一、稳定字段（如 item.name 或 item.id），避免因重排序导致组件复用异常。
总结：Vue 中函数即一等公民，将其作为 prop 是解耦与动态行为注入的标准实践。掌握这一模式，可高效支撑导航菜单、工具栏、快捷操作区等需差异化响应的列表场景。
