Slot默认内容怎么设置才能兼容老项目-php教程-PHP中文网

vue 2.6.13 之前版本默认内容不生效需统一 vue 与 vue-template-compiler 版本至 2.6.12 或更低，或改用 v-if 判断 $slots.default 并手动 fallback。

slot默认内容怎么设置才能兼容老项目

如果你的项目还在用 Vue 2.6.12 或更早版本（尤其是通过 CDN 引入、或 vue 与 vue-template-compiler 版本不一致），<slot>默认文本</slot> 可能完全不渲染——不是逻辑问题，是编译器根本没生成 fallback 分支。

根本原因是：老版 renderSlot 方法只接受 VNode 类型的 fallback，而模板里写的文本会被编译成字符串，无法直接插入；新版才支持函数或 VNode 两种 fallback 形式。

检查当前版本：console.log(Vue.version) 和 console.log(require('vue-template-compiler').version)，若不一致（比如 Vue 2.6.10 + vue-template-compiler 2.6.14），默认内容必然失效
临时兼容写法：用 v-if 显式判断插槽是否存在，再手动 fallback：
```
<slot v-if="$slots.default"></slot><div v-else>这里是后备内容</div>
```
具名插槽同理：v-if="$slots.header"，不能依赖 <slot name="header">默认</slot> 直接生效

CDN 引入 Vue（如 https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.min.js）时，vue-template-compiler 不参与运行，所有模板都在浏览器端编译，此时版本一致性完全取决于你引入的 Vue 版本号。

但实际中常遇到 CDN 加载的是旧版（如 2.5.x），导致 <slot>文本</slot> 被忽略，页面留白。

最稳妥的写法是放弃纯文本 fallback，改用带标签的最小结构：<slot><span>暂无内容</span></slot> —— 即使编译器不识别 fallback，至少会把 <span></span> 当作普通子节点渲染（虽非预期行为，但比空白好）
避免在 <slot></slot> 内写纯空格或换行，老版本对空白节点处理更不稳定，可能触发“有节点但无内容”的误判

如果必须用纯文本 fallback，加一层 v-show 保底：

<slot></slot><div v-show="!$slots.default">默认文案</div>

即使版本达标，<slot>默认内容</slot> 仍可能不出现，常见于父组件写法“看似没传内容，实则传了空白节点”。

Fluentify

Fluentify是一个免费和开源的“网络”

下载

Vue 的 fallback 触发条件非常严格：只有当 $slots.default 数组长度为 0 时才启用，默认内容才会渲染。而一个换行、一个空格、甚至注释节点，都会让 $slots.default.length > 0。

每个具名插槽的 fallback 是独立判断的，不需要为每个插槽都写 v-if，但要注意它们的外层容器是否受共同条件控制。

例如：<div v-if="show"><slot name="header">默认头</slot></div>，这时即使没传 header 插槽，只要 show 为 false，连默认内容都不会渲染——fallback 前提是 <slot></slot> 标签本身被求值。

推荐结构：把 <slot></slot> 放在稳定渲染的容器内，而非嵌套在 v-if、v-for 或动态组件中
多个插槽可混用：<slot name="header">默认头</slot>、<slot>默认主体</slot>、<slot name="footer">默认脚</slot>，三者互不影响
父组件只提供部分插槽时（如只传 #header），其余插槽仍按各自默认内容渲染，无需额外逻辑

真正容易被忽略的点是：fallback 不是“兜底展示”，而是“节点分配失败时的替代渲染”。它不关心内容是否有意义，只认 $slots.xxx 是否为空数组。哪怕父组件传了个 ，也会让默认内容失效。