slot标签内默认内容仅在父组件未分配任何节点（含空格、换行）时渲染，本质是后备内容而非直接显示；需确保slot标签被求值且外层结构可控。
slot 标签里写默认内容会直接渲染吗
不会。单纯在 <slot></slot> 标签内写文本或 HTML，只是“后备内容”（fallback content），仅当父组件没传入对应具名或默认插槽内容时才显示。浏览器原生 <slot></slot> 本身不渲染任何东西——它只是个出口占位符。
怎么让 slot 显示默认文字或结构
把默认内容写在 <slot></slot> 开始和结束标签之间即可。注意：这些内容必须是合法的 HTML 片段，且不能包含脚本或事件绑定（那些不会执行）。
常见写法示例：
<template><div class="card">
<slot name="header"><h3>默认标题</h3></slot><slot>这里是默认正文内容</slot><slot name="footer"><button>确定</button></slot>
</div>
</template>
- 具名插槽如
name="header"的默认内容只在父组件未提供<template v-slot:header></template>或<template></template>时生效 - 匿名
<slot></slot>的默认内容，会被父组件的子节点完全替换（哪怕只传一个空<div></div>） - 默认内容里的样式类、属性都保留，但内部绑定的
@click或v-model不起作用
为什么 slot 默认内容有时不显示
最常见原因是父组件意外传递了空内容——比如写了 <my-card></my-card>，表面看没传内容，但 HTML 解析器会把换行和空白字符当作一个空文本节点，导致匿名 <slot></slot> 认为“已有内容”，于是跳过默认值。
解决办法：
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
- 父组件中显式留空时，用
<my-card><template v-slot:default></template></my-card>，确保插槽内容为空节点而非文本节点 - 对关键默认内容，可加
v-if判断是否真有内容传入（需配合$slotsAPI，在 setup 中用slots.default?.()检查） - 避免在自定义组件根元素上直接写文本——那不属于插槽内容，也不会触发 slot 回退逻辑
Vue 2 和 Vue 3 的 slot 默认行为差异
Vue 2 中 <slot></slot> 默认内容在编译期静态插入，无法响应 props 变化；Vue 3 的 <slot></slot> 是函数式调用，其默认内容在渲染时求值，支持响应式变量（但仅限于模板顶层变量，不能访问 setup 内部的局部 ref）。
例如在 Vue 3 中可以这样写：
<slot>{{ title || '暂无标题' }}</slot>
而 Vue 2 中 {{ title }} 在默认内容里不会更新。
真正容易被忽略的是：slot 默认内容的 CSS 作用域。它受父组件样式影响（尤其 scoped style），如果默认内容需要独立样式，得在父组件或全局 style 里额外声明，不能指望子组件的 <style scoped></style> 覆盖它。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
