Vue.js：如何为v-for生成的组件绑定不同点击事件

下面提供两种可靠的实现方式，解决你遇到的props传函数、emit不生效的问题：

方式一：通过Props直接传递点击函数 #

这种方式最直接，只要确保函数正确传递和调用即可：

父组件代码 #

<template>
  <div class="list-container">
    <ListItem 
      v-for="(item, index) in listItems" 
      :key="index"
      :name="item.name"
      :icon="item.icon"
      :on-click="item.onClick"
    />
  </div>
</template>

<script setup>
import { reactive } from 'vue'
import ListItem from './ListItem.vue'

// 定义带点击函数的列表数据
const listItems = reactive([
  {
    name: '选项1',
    icon: 'icon-home',
    onClick: () => {
      console.log('触发选项1逻辑')
      // 这里写对应业务代码
    }
  },
  {
    name: '选项2',
    icon: 'icon-setting',
    onClick: () => {
      console.log('触发选项2逻辑')
    }
  }
])
</script>

子组件（ListItem.vue）代码 #

<template>
  <div class="list-item" @click="handleClick">
    <i class="icon">{{ icon }}</i>
    <span>{{ name }}</span>
  </div>
</template>

<script setup>
// 声明接收的props，明确函数类型
const props = defineProps({
  name: String,
  icon: String,
  onClick: Function
})

const handleClick = () => {
  // 用可选链避免函数未定义时报错
  props.onClick?.()
}
</script>

方式二：通过Emit传递标识，父组件匹配执行函数 #

如果更倾向于组件通信的规范写法，可以通过emit传递项的唯一标识，父组件找到对应项后执行函数：

父组件代码 #

<template>
  <div class="list-container">
    <ListItem 
      v-for="(item, index) in listItems" 
      :key="index"
      :name="item.name"
      :icon="item.icon"
      :item-id="item.id"
      @item-click="handleItemClick"
    />
  </div>
</template>

<script setup>
import { reactive } from 'vue'
import ListItem from './ListItem.vue'

const listItems = reactive([
  {
    id: 'opt_01',
    name: '选项1',
    icon: 'icon-home',
    onClick: () => console.log('触发选项1逻辑')
  },
  {
    id: 'opt_02',
    name: '选项2',
    icon: 'icon-setting',
    onClick: () => console.log('触发选项2逻辑')
  }
])

const handleItemClick = (itemId) => {
  // 根据标识找到对应项并执行函数
  const targetItem = listItems.find(item => item.id === itemId)
  targetItem?.onClick?.()
}
</script>

子组件（ListItem.vue）代码 #

<template>
  <div class="list-item" @click="emitClick">
    <i class="icon">{{ icon }}</i>
    <span>{{ name }}</span>
  </div>
</template>

<script setup>
const props = defineProps({
  name: String,
  icon: String,
  itemId: String
})

// 声明要触发的事件
const emit = defineEmits(['item-click'])

const emitClick = () => {
  // 传递标识给父组件
  emit('item-click', props.itemId)
}
</script>

常见问题排查 #

• Props传函数不生效：检查子组件是否正确声明了onClick的props类型为Function；调用时用?.()避免函数未定义报错；确保reactive数组里的项确实包含有效的函数。
• Emit不生效：检查子组件defineEmits声明的事件名和父组件监听的是否一致（Vue3推荐用短横线命名，比如item-click）；确认传递的标识（如itemId）能被父组件正确匹配到对应项。

内容的提问来源于stack exchange，提问作者user21903805