【前端2】vue 报错：The template root requires exactly one element
是Yu欸 2024-07-22 10:33:01 阅读 91
【前端】vue 报错：The template root requires exactly one element
写在最前面Prettier - Code formatter插件解决 Vue 报错：The template root requires exactly one element错误原因示例
解决方法更复杂的示例使用 Fragment 解决问题
小结
🌈你好呀！我是 是Yu欸
🌌 2024每日百字篆刻时光，感谢你的陪伴与支持 ~
🚀 欢迎一起踏上探险之旅，挖掘无限可能，共同成长！
写在最前面
封面图内含彩蛋 ~
原因：
Vue2要求模板中的<code><template>中只能有一个根元素，也就是说最外层不能同时包含其他元素或者文本。如果模板中出现多个根元素，就会触发这个错误。
解决：
vue2：所以，删除多的根元素，or在最外层再加一个div包裹其他根元素
vue3中，则去掉了这个限制。引入了一个新的特性叫做 Fragment，这允许我们在不需要额外的 DOM 元素的情况下使用多个根元素。
可以参考
https://blog.csdn.net/Y_soybean_milk/article/details/124338835
附言：如果你是用vue3，建议用Volar来替换vetur
参考：https://blog.csdn.net/a417125111/article/details/100996750
Prettier - Code formatter插件
此外，建议安装vue代码格式化插件，提升vue编程幸福感
在扩展商店中搜索（ Prettier - Code formatter ）点击安装
参考：https://blog.csdn.net/qq_38188228/article/details/118295851
解决 Vue 报错：The template root requires exactly one element
在使用 Vue.js 开发前端应用时，可能会遇到这样的错误提示：“The template root requires exactly one element”（模板根需要一个且仅一个元素）。这个错误是由于 Vue 的模板系统的一个基本要求造成的，即每个组件的模板必须有且仅有一个根元素。下面我们来深入探讨这个问题并提供解决方案。
错误原因
Vue.js 要求每个组件的模板都应该有一个根元素，这是为了保证组件的结构清晰且在虚拟 DOM 中能正确地进行渲染和更新。如果模板中有多个根元素，Vue 无法确定这些元素之间的关系，从而导致渲染错误。
示例
例如，下面的代码会引发这个错误：
<template>
<div class="header">Header</div>code>
<div class="content">Content</div>code>
</template>
在这个示例中，模板中包含两个根元素 <div class="header">code> 和 <div class="content">code>。因为 Vue 只能接受一个根元素，所以会抛出错误。
解决方法
要解决这个问题，我们只需确保模板中只有一个根元素，可以通过将所有内容包裹在一个父元素中来实现。修改后的代码如下：
<template>
<div>
<div class="header">Header</div>code>
<div class="content">Content</div>code>
</div>
</template>
现在，所有内容都被包裹在一个 <div> 元素中，模板中只有一个根元素，错误也就消失了。
更复杂的示例
在实际开发中，模板结构可能会更加复杂。例如，我们可能会使用多个组件并列展示：
<template>
<MyHeader />
<MyContent />
</template>
这同样会引发错误，因为这里也有两个根元素。解决方法是将它们包裹在一个父元素中：
<template>
<div>
<MyHeader />
<MyContent />
</div>
</template>
使用 Fragment 解决问题
在 Vue 3 中，引入了一个新的特性叫做 Fragment，这允许我们在不需要额外的 DOM 元素的情况下使用多个根元素。通过使用 <template> 标签，我们可以解决这个问题：
<template>
<template>
<MyHeader />
<MyContent />
</template>
</template>
在这个例子中，我们使用了嵌套的 <template> 标签来包裹多个根元素，从而避免了引入额外的 DOM 元素。
小结
“The template root requires exactly one element” 错误是 Vue.js 开发中常见的问题，但只要理解了其原因和解决方法，就能轻松应对。无论是通过包裹一个父元素还是利用 Vue 3 的 Fragment 特性，都能保证我们的组件模板结构正确，避免错误的发生。
希望这篇博客能帮助你更好地理解和解决 Vue 中的这个常见错误。如果有任何问题或建议，欢迎在评论区交流。Happy coding!
hello，我是 是Yu欸 。如果你喜欢我的文章，欢迎三连给我鼓励和支持：👍点赞 📁 关注 💬评论，我会给大家带来更多有用有趣的文章。
原文链接 👉 https://blog.csdn.net/WTYuong/article/details/139996116 ，⚡️更新更及时。
欢迎大家添加好友交流。
上一篇： 编译支持音视频的QtWebEngine + Win10_x64 + QT5.15.0 + VS2019
下一篇： 你评论，我赠书~【哈士奇赠书 - 16期】〖Vue.js 快速入门实战〗等你来拿
本文标签
声明
本文内容仅代表作者观点，或转载于其他网站，本站不以此文作为商业用途
如有涉及侵权，请联系本站进行删除
转载本站原创文章，请注明来源及作者。