根本原因是vue插槽只接收模板结构（vnode），不接收js数组值；直接传[1,2,3]会被当纯文本或忽略，正确方式是用作用域插槽绑定并解构数组数据。
组件 Slot 传数组显示不出来，根本原因不是数组本身有问题，而是 Vue 的插槽机制根本不接收“数组值”——slot 只接收模板结构（VNode），不是 props，不能直接传 [1, 2, 3] 这种 JS 值。
为什么直接传数组会被忽略？
Vue 插槽只处理父组件标签内的**模板内容**，也就是编译后的 DOM 片段或组件节点。如果你写成：
<mycomponent>[1, 2, 3]</mycomponent>
这串文本会被当作纯文本节点传入，但子组件没写 <slot></slot> 或用了 v-if 错位，它就直接消失；更常见的是你本意想传数组数据，却误当成 props 用，比如：
<mycomponent :items="[1,2,3]"></mycomponent>
→ 这根本不是 slot 传值，是 props，和 <slot></slot> 无关。
作用域插槽才是传数组数据的正解
想让子组件把数组“暴露”给父组件渲染逻辑，必须用作用域插槽（scoped slot），子组件通过 <slot></slot> 绑定数据，父组件用 v-slot 解构接收：
- 子组件中：
<slot :list="items"></slot>（items是 data / computed 返回的数组） - 父组件中：
<template list><div v-for="i in list" :key="i">{{ i }}</div></template> - 注意：Vue 2 要用
slot-scope，Vue 3 必须用v-slot，别混用 - 如果
list是异步加载的，初始为null或undefined，v-for会报错，得加守卫：v-for="i in list || []"
具名插槽 + 数组渲染容易踩的坑
比如你写了具名插槽 <slot name="item"></slot>，又在父组件里这样用：
<template>{{ item.id }}</template>
→ 这里 item 是整个绑定对象（如 { item: { id: 1 } }），不是解构后的 item 对象。正确写法是：
<template item>{{ item.id }}</template>
其他典型错误包括：
-
<slot name="list" :items="items"></slot>写对了，但父组件漏了v-slot:list，内容直接不渲染 - 子组件里
<slot name="list" v-if="items.length"></slot>→v-if在<slot></slot>上，数组为空时整个插槽被移除，父组件内容进不来 - 使用
el-table-column等封装深的 UI 组件时，插槽内部用v-for渲染数组，但没给每项加:key，导致复用异常、内容错乱
React 中类似场景怎么处理？
React 没有 slot 概念，传数组要靠 children 函数或 render prop：
<mycomponent>{(items) => items.map(i => <div key="{i.id}">{i.name}</div>)}</mycomponent>
或者用 props 显式传递：<mycomponent items="{myArray}"></mycomponent>，再在组件内 {props.items.map(...)}。不要试图把数组当 children 直接塞进去——那只会变成 [object Object] 字符串。
真正容易被忽略的是：slot 不是数据通道，它是模板分发出口。想传数据，必须走作用域插槽；想传结构，才用默认/具名插槽。混淆这两者，90% 的“数组不显示”问题就来了。
