vue插槽不支持直接v-if/v-for，需由父组件控制条件渲染；数据通过作用域插槽由子组件暴露、父组件接收；常见错误包括跨作用域访问、语法过时及解构空对象。
Vue 插槽本身不直接支持 v-if 或 v-for 这类指令的条件渲染，但可以通过组合“作用域插槽 + 父组件逻辑”来实现内容的动态控制；数据传递则依赖作用域插槽机制——子组件主动暴露数据，父组件用 v-slot 接收并决定如何使用。
插槽内容如何做条件渲染
插槽内容的显示逻辑必须由父组件掌控，因为插槽内容始终在父组件作用域中编译和执行。
- 在父组件中对插槽内容包裹
v-if、v-show或三元表达式：例如<template loading>{{ loading ? '加载中...' : '完成' }}</template> - 若需根据子组件状态切换整个插槽区域，可在子组件模板中用
v-if控制<slot></slot>是否渲染，比如：<slot v-if="hasData"></slot><div v-else>暂无内容</div> - 避免在
<slot></slot>标签上直接写v-if并期望它影响父组件传入的内容——这无效，因为插槽占位符只是“出口”，不参与父组件内容的条件判断
插槽怎么安全传递数据给父组件
插槽不能反向“推送”数据，但可通过作用域插槽把子组件的数据作为参数“提供”出来，由父组件按需使用。
- 子组件在
<slot></slot>上绑定属性，如：<slot :item="currentItem" :index="currentIndex" :is-active="isActive"></slot> - 父组件用
v-slot解构接收：<child v-slot="{ item, index, isActive }">{{ item.name }} #{{ index }} ({{ isActive ? '激活' : '未激活' }})</child> - 具名插槽同理，只需 name 匹配且属性名一致，例如：
<slot name="footer" :count="totalCount"></slot>对应<template count>共 {{ count }} 条</template>
常见误操作与规避方式
很多问题源于混淆了“谁拥有数据”和“谁控制渲染”这两个边界。
- ❌ 在插槽内容里直接访问子组件的
data、ref或computed—— 不行，插槽运行在父作用域，只能用子组件明确暴露的字段 - ❌ 使用已废弃的
slot="xxx"语法搭配作用域属性 —— Vue 3 中必须用v-slot:xxx或简写#xxx - ❌ 子组件
<slot></slot>没绑定任何属性，父组件却写了v-slot="{ xxx }"—— 解构对象为空，不会报错但拿不到值，建议加默认值或判断存在性
Vue 3 setup 中手动处理插槽内容
当需要在逻辑层干预插槽渲染（比如封装高阶组件），setup 中的 slots 是函数而非对象。
-
slots.default?.()可渲染默认插槽，不传参 -
slots.header?.({ title: '设置页' })向具名插槽传入上下文数据，供其内部使用 - 注意：手动调用
slots.xxx()返回的是 VNode 数组，需配合h()或render()函数使用，日常模板开发中较少直接操作
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
