本文详解 vue 3 中如何正确定义、注册并渲染多个自定义组件，重点解决模板缺失、选项式 api 误用、插值语法冲突等常见错误，提供可直接运行的组合式 api 示例。

在 Vue 3 中，组件必须显式声明 template（或使用

此外，Vue 3 推荐使用组合式 API（Composition API） 替代选项式 API（Options API）中的 data()、mounted() 等选项，不仅更契合响应式系统设计，也避免了 this 绑定问题和生命周期钩子冗余写法。

✅ 正确做法如下（基于浏览器原生 ES 模块导入，无需构建工具）：

? 关键要点说明：

• ✅ template 是必需的：每个组件必须通过 template 选项（字符串、DOM 元素或 ID 引用）明确指定渲染内容；内联 HTML（如 URL: [[image]]）不会被当作组件模板，而是作为默认插槽内容（slot），但你的组件并未定义 ，因此被忽略。
• ✅ 禁用自定义分隔符：Vue 3 已移除 delimiters 配置，强行设置无效；统一使用 {{ }} 即可。
• ✅ 优先使用 ref + setup()：ref 提供响应式数据，onMounted 替代 mounted() 钩子，语义清晰且类型友好。
• ✅ 组件名规范：HTML 中使用 kebab-case（），注册时可保持一致；但注意：若使用自闭合标签（如 ），需确保服务端/HTML 解析器支持，推荐显式闭合（）。
• ⚠️ 注意事项：

总结：Vue 3 的组件不是“自动提取 HTML 子节点当模板”，而是严格依赖 template 或 render 函数驱动渲染。从零搭建多组件应用时，请始终遵循「定义 template → 声明组件 → 注册到 app → 挂载」这一标准流程，即可避免绝大多数空白渲染问题。