具名插槽默认内容不渲染的常见原因是父组件声明了空的具名插槽（如<template v-slot:xxx></template>），Vue将其视为“已提供内容”而跳过默认内容；正确做法是在<slot name="xxx">内直接写默认内容，且默认内容无法访问作用域变量。
具名插槽默认内容不渲染的常见原因
具名插槽（slot[name="xxx"]）的默认内容只有在父组件**没传对应具名内容**时才显示。很多人误以为只要写了默认内容就一定会渲染，结果发现页面空白——根本原因是子组件中用了具名插槽，但父组件传了空的 <template v-slot:xxx></template> 或者只写了 <div v-slot:xxx></div>，这会被 Vue 当作“已提供内容”，于是跳过默认内容。
如何正确设置具名插槽默认内容
在子组件模板中，直接在 <slot> 标签内写内容即可，无需额外属性：
<!-- 子组件 MyButton.vue --> <button> <slot name="icon"><i class="icon-default"></i></slot> <slot name="label">点击我</slot> </button>
父组件中：不传 v-slot:icon 时，会显示 <i class="icon-default"></i>；不传 v-slot:label 时，显示“点击我”。但只要写了 <template #icon></template>，哪怕里面是空的，<i> 就不会出现。
父组件传空内容却想 fallback 到默认值？得手动处理
Vue 不会自动判断“传了但为空”和“根本没传”的区别。如果业务上需要“内容为空时仍用默认值”，只能在子组件里加逻辑：
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
- 用
<slot>的name属性配合v-if+$slots检测（Vue 3 Composition API 中通过slots对象） - 例如：在
setup()中检查slots.icon?.()是否返回空 vnode，再决定是否渲染 fallback - 更简单粗暴的做法：父组件别传空
<template #icon></template>，而是彻底省略该插槽调用
默认内容里不能用作用域插槽变量
具名插槽的默认内容属于“静态 fallback”，它无法访问插槽作用域（scope）里的数据。比如下面写法是无效的：
<slot name="item" :item="item">
<!-- ❌ item 在这里不可用，会报 undefined -->
<span>默认项：{{ item?.name }}</span>
</slot>如果需要带数据的 fallback，必须把逻辑提到子组件内部，用 v-if + slots.item 判断后分别渲染。
真正容易被忽略的是：默认内容的渲染时机完全由父组件是否“声明性地使用该插槽”决定，而不是由内容是否为空决定。这点和普通插槽一样，但具名插槽更容易因模板写法（比如加了个空 template）而意外覆盖掉 fallback。
