如何实现HTML模板的嵌套与组件化递归-html教程-PHP中文网

HTML原生不支持递归渲染，需手动遍历数据逐层克隆填充；Vue递归组件必须显式声明name属性；Go模板需用{{define}}+{{template}}模拟递归；iframe是页面级隔离，非模板递归。

如何实现html模板的嵌套与组件化递归

HTML原生

浏览器不会自动展开嵌套的 <template></template> 标签，也不会执行其中的占位符（如 {{item.name}}）或触发子模板实例化。你看到的只是静态 HTML 字符串，cloneNode(true) 后的内容仍是未解析的文本节点。

常见错误现象：用 document.querySelector('template').content.innerHTML 能看到子 <template></template> 标签，但调用 appendChild() 后页面空白或只显示原始标签名；<slot></slot> 在多层 <template></template> 中完全无效——它只在自定义元素的 Shadow DOM 里起作用。

必须手动遍历数据，逐层克隆、填充、挂载
每次递归都要显式查找目标容器（如 data-slot="children"），清空后插入新生成的 DOM 片段
避免直接操作 innerHTML 插入未 sanitised 的字符串，防止 XSS
IE 不支持 <template></template>，需降级用 <script type="text/template"></script> + innerHTML 解析

Vue 递归组件必须声明 name 属性

Vue 的递归调用依赖组件自身的 name 选项，没有它，模板里的 <tree-node></tree-node> 标签会被当作普通 HTML 元素忽略，不会触发递归渲染。

典型结构是父组件内用 v-for 渲染子项，同时把 item.children 作为 prop 传给同名子组件：

<template><div class="node">
    <span>{{ node.label }}</span>
    <tree-node v-for="child in node.children" :key="child.id" :node="child"></tree-node>
</div>
</template>

name: 'tree-node' 必须显式写在组件选项中，不能靠文件名或注册名推断
确保 node.children 是数组且非 null，否则 v-for 会报错或静默失败
深层递归（>10 层）可能触发浏览器栈溢出，建议前端加 v-if="depth 限制展开深度
不要在模板里做数据过滤（如 v-if="child.visible"），应在 data 或 computed 中预处理干净

Go 的 html/template 需用 {{define}} + {{template}} 模拟递归

Go 模板引擎不支持函数式递归，只能靠定义局部模板并显式调用自身来模拟。关键不是“能不能”，而是“怎么安全传参并终止”。

Wechat Article Html

将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。

下载

正确做法是用 {{define "menu-item"}} 单独定义可复用模板，再在 {{range}} 外部用 {{template "menu-item" .}} 启动，每次递归都显式传入子切片：