在Nuxt3项目中如何获取vue3-virtual-scroll-list的选中项？

方法一：子组件直接向页面父组件emit数据 #

之前向虚拟列表组件emit无效是因为虚拟列表本身未监听自定义事件，正确做法是让子组件把选中项直接传给使用虚拟列表的页面组件：

1. 在VirtualScrollTemplate子组件中声明并触发emit：

<script setup>
const emit = defineEmits(['item-selected'])

// 子组件内的点击事件处理
const handleClick = (item) => {
  emit('item-selected', item)
}
</script>

<template>
  <div @click="handleClick(item)">
    <!-- 子组件渲染内容，比如 {{ item.name }} -->
  </div>
</template>

2. 在页面组件中使用虚拟列表时，给子组件绑定事件监听：

<template>
  <VirtualList
    :data-key="'id'"
    :data-sources="yourListData"
    :data-component="VirtualScrollTemplate"
  >
    <template #item="{ record }">
      <VirtualScrollTemplate :item="record" @item-selected="onItemSelect" />
    </template>
  </VirtualList>
</template>

<script setup>
const onItemSelect = (selectedItem) => {
  console.log('选中的项：', selectedItem)
  // 这里编写你的选中逻辑（比如赋值给响应式变量、提交表单等）
}
</script>

方法二：直接在页面插槽中处理点击 #

不需要子组件额外emit，直接在页面的虚拟列表插槽内绑定点击事件获取选中项：

<template>
  <VirtualList
    :data-key="'id'"
    :data-sources="yourListData"
    :data-component="VirtualScrollTemplate"
  >
    <template #item="{ record }">
      <!-- 在外层包裹元素上绑定点击事件，直接获取当前项 -->
      <div @click="onItemSelect(record)">
        <VirtualScrollTemplate :item="record" />
      </div>
    </template>
  </VirtualList>
</template>

<script setup>
const onItemSelect = (selectedItem) => {
  console.log('选中的项：', selectedItem)
  // 处理选中逻辑
}
</script>

常见排查点 #

• 确保data-key设置为数据源中唯一的字段（如id），虚拟列表依赖此字段识别列表项
• 子组件中若使用选项式API，需用this.$emit('item-selected', item)触发事件，注意事件名大小写一致
• 确认data-sources是合法数组，且每个列表项包含你需要获取的字段

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