vue中关于template报错等问题的解决
更新时间：2022年04月26日 11:54:40 作者：伊丶二
这篇文章主要介绍了vue中关于template报错等问题的解决，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
template报错
写这个纯粹是为了纪念有多蠢
template:` <div class='app'> <button ref = 'btn'>我是按钮1</button> <subCom ref = 'subc'></subCom> </div> `,
关于template里面写的HTML，经历了报错，控制台反映字符串不齐，语法错误等一系列问题后，查遍了各种博客，在查看别的框架的源码后，才发现语法没有问题，js导入没有问题，有问题的是
template里面，用的是``
就是数字1旁边的`，不是单引号！！！
就这个我尝试查询了一个多小时的bug。。。
vue报错问题
The template root requires exactly one element
这段话的意思是：根模板必须有一个准确的元素。
在vue组件中会使用template标签，在template中，还需要一个标签元素将其他标签元素包裹起来，因为template标签是不会被DOM解析，生成DOM元素的时候会被隐藏，而组件又必须只能有一个根节点。
//helloWorld.vue //正确写法 <template> <div> <h1>我是h1</h1> <h1>我是h1</h1> <h1>我是helloWorld</h1> </div> </template> //错误写法,会报错。 <template> <h1>我是h1</h1> <h1>我是h1</h1> <h1>我是helloWorld</h1> </template>
这种最外层标签元素只能有一个的方式跟React中的组件用法一致。
React中render函数return组件的时候，最外层也必须只能有一个标签元素，将其他标签严肃包裹起来，否则会报错。
//helloWorld.jsx
render(){
return(
<div>
<h1>我是h1</h1>
<h1>我是h1</h1>
<h1>我是helloWorld</h1>
</div>
)
}以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了vue中如何引入html静态页面，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-01-01
在本篇文章里小编给大家整理的是关于vue按需加载实例的相关知识点内容，有需要的朋友们可以学习参考下。2019-09-09
这篇文章主要介绍了Vue入门学习笔记,结合实例形式分析了vue.js的基本概念、对象、过滤器、指令等的相关原理与简单使用方法,需要的朋友可以参考下2019-04-04
这篇文章主要为大家详细介绍了如何通过Vue全局组件的挂载来实现弹窗组件，文中的示例代码讲解详细，具有一定的借鉴价值，感兴趣的可以了解一下2022-11-11
vue3中的watch是一个组合式的API使用时需要引入,下面这篇文章主要给大家介绍了关于vue3下watch使用的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2023-03-03
随着 Vue 3 的发布,一些在 Vue 2 中常用的通信方式在 Vue 3 中可能不再适用或有所变化,为了应对这种变化,我们可以选择在 Vue 3 应用中实现自定义的“事件总线”机制,所以本文给大家介绍了Vue3中如何自定义消息总线,需要的朋友可以参考下2024-05-05
这篇文章主要介绍了vue中的mescroll搜索运用及各种填坑处理，文中通过代码给大家讲解了mescroll vue使用，感兴趣的朋友跟随小编一起看看吧2019-10-10
最近在项目中使用了ElementUI的el-autocomplete,下面这篇文章主要介绍了vue中el-autocomplete支持分页上拉加载功能的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-11-11
这篇文章主要介绍了Vue项目中input框focus时不调出键盘问题的解决，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
表格数据是websocket通信获取的数据,首次获取20条数据,以后新增订阅获取一条,新增一条则向上滑动显示最新数据,本文给大家介绍Element-plus使用中遇到的问题小结,感兴趣的朋友跟随小编一起看看吧2024-04-04
最新评论