HTML代码中slot具名插槽默认内容-html教程-PHP中文网

具名插槽默认内容不渲染的常见原因是父组件声明了空的具名插槽（如），vue将其视为“已提供内容”而跳过默认内容；正确做法是在内直接写默认内容，且默认内容无法访问作用域变量。

html代码中slot具名插槽默认内容

具名插槽默认内容不渲染的常见原因

具名插槽（slot[name="xxx"]）的默认内容只有在父组件**没传对应具名内容**时才显示。很多人误以为只要写了默认内容就一定会渲染，结果发现页面空白——根本原因是子组件中用了具名插槽，但父组件传了空的 <template v-slot:xxx></template> 或者只写了 <div v-slot:xxx></div>，这会被 Vue 当作“已提供内容”，于是跳过默认内容。

如何正确设置具名插槽默认内容

在子组件模板中，直接在 <slot></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></template>，哪怕里面是空的，<i></i> 就不会出现。

父组件传空内容却想 fallback 到默认值？得手动处理

Vue 不会自动判断“传了但为空”和“根本没传”的区别。如果业务上需要“内容为空时仍用默认值”，只能在子组件里加逻辑：

html-to-pptx-converter

使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。

下载

用 <slot></slot> 的 name 属性配合 v-if + $slots 检测（Vue 3 Composition API 中通过 slots 对象）
例如：在 setup() 中检查 slots.icon?.() 是否返回空 vnode，再决定是否渲染 fallback
更简单粗暴的做法：父组件别传空 <template></template>，而是彻底省略该插槽调用

默认内容里不能用作用域插槽变量

具名插槽的默认内容属于“静态 fallback”，它无法访问插槽作用域（scope）里的数据。比如下面写法是无效的：

<slot name="item" :item="item"><!-- ❌ item 在这里不可用，会报 undefined --><span>默认项：{{ item?.name }}</span>
</slot>

如果需要带数据的 fallback，必须把逻辑提到子组件内部，用 v-if + slots.item 判断后分别渲染。

真正容易被忽略的是：默认内容的渲染时机完全由父组件是否“声明性地使用该插槽”决定，而不是由内容是否为空决定。这点和普通插槽一样，但具名插槽更容易因模板写法（比如加了个空 template）而意外覆盖掉 fallback。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索前端的入门与实战技巧！