vue插槽通过作用域插槽将渲染权交给父组件，子组件专注可视范围计算与位置控制；传递item、index、top等参数，配合transform定位、占位元素撑高及滚动监听，实现高性能虚拟滚动。
Vue 插槽本身不直接实现虚拟滚动，但它能和虚拟滚动逻辑深度协同——关键在于：用作用域插槽把“渲染权”交给父组件，而子组件专注做“范围计算+位置控制”。这样既保持结构解耦，又确保高性能。
作用域插槽传递可视项数据
子组件内部维护 visibleItems（仅当前可视区域的数据片段），再通过作用域插槽把每项的 item、index、甚至 top 位置或 height 一并传出：
- 模板中不写具体 DOM 结构，只留
<slot :item="item" :index="index" :top="itemTop"></slot> - 父组件用
v-slot="{ item, index, top }"接收，并自由决定怎么渲染：带图标、骨架屏、懒加载图、条件样式等 - 避免在插槽里写
v-for，因为循环已在子组件内完成，插槽只负责单条渲染
配合 transform 定位实现“伪绝对布局”
子组件需控制每个插槽内容的视觉位置，而不是依赖文档流排列：
vue-composition-api-best-practices
Vue 3 组合式 API 与
热门下载
相关下载
精品课程
相关推荐
/
热门推荐
/
最新课程
最新文章