Vue模板HTML嵌套需遵循原生HTML内容模型，禁用非法嵌套（如p内嵌div），template仅作逻辑容器，v-html绕过编译但无响应式，slot和动态组件保障安全嵌套与响应性。

Vue 模板中 HTML 嵌套的基本规则 Vue 的模板语法本质是增强版的 HTML，但不是所有 HTML 嵌套都直接可用。浏览器原生不识别的标签（如 <template>、<slot>）或语义冲突结构（比如在 <p> 里嵌 <div>）会被 Vue 编译器警告或静默修正。

• <template> 只能作为逻辑包装容器，不能渲染为真实 DOM，也不支持绑定 v-if 和 v-for 在同一层级（需用 <template v-if> 或提取到子元素）
• 真实 HTML 内容模型仍起作用：例如 <p> 中禁止嵌 <div>，否则 Vue 会把 <div> 提到 <p> 外，导致布局错乱
• 自定义组件名若全小写且含短横线（如 <my-button>），必须确保已全局/局部注册，否则被当作原生未知标签忽略

使用 v-html 插入含嵌套的 HTML 字符串v-html 是唯一允许运行时插入带嵌套结构的 HTML 的方式，但它绕过 Vue 模板编译，内部指令（v-on、v-model）和响应式绑定全部失效。

• 插入内容必须来自可信源，否则有 XSS 风险；不可直接绑定用户输入的富文本
• 嵌套中的事件需手动用 document.addEventListener 绑定，且注意事件委托与组件卸载后的清理
• 不要对 v-html 容器再使用 v-if 或 v-for —— 这些指令在该节点上会被忽略

<div v-html="rawHtml"></div>
// rawHtml = '<section><h2>标题</h2><p><strong>加粗</strong></p></section>'

动态组件 + <slot> 实现安全嵌套复用 当需要“框架内嵌套”——即父组件预留结构、子组件注入内容并保持响应式——应优先用 <slot> 和 <component :is>，而非拼接字符串。

• 默认插槽内容在父组件编译阶段就被解析，保留 Vue 指令和响应性
• 具名插槽（<slot name="header">）适合多区域嵌套，但注意命名一致性，name 值必须是合法标识符（不能含空格或特殊符号）
• <component :is> 切换组件时，若嵌套深层（如 A → B → C），需确保每层都正确透传 $slots 和 $attrs，否则子内容丢失

SSR 或构建时预编译场景下的嵌套限制 在 Nuxt 或 Vite+SSG 环境中，HTML 嵌套还受服务端解析和静态生成影响：

• <keep-alive> 包裹的组件若含深度嵌套 slot，首次 SSR 渲染可能丢失部分插槽内容，需检查 setup() 中是否提前访问了未就绪的 slots
• 使用 defineAsyncComponent 加载嵌套组件时，异步组件内部的 <slot> 不会等待加载完成才渲染，可能导致占位空白
• v-pre 可跳过某段嵌套的编译，但仅适用于纯展示，无法与响应式数据联动

真正难处理的不是嵌套本身，而是嵌套层级带来的作用域泄漏、插槽透传断裂和 SSR hydration 不匹配——这些往往在开发后期才暴露，且错误提示模糊。

Html2md

使用 Readability + Turndown 将 HTML 页面转换为干净的、Agent 友好的 Markdown。去除导航栏、广告、页脚、Cookie 横幅、社交按钮等干扰元素。支持 URL...

下载