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 component第三方库，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-02-02
这篇文章主要为大家详细介绍了Vue分页器组件的使用方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-03-03
这篇文章主要介绍了el-tooltip根据条件控制显示的示例代码,包括列表型和树状图型,本文通过示例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧2023-12-12
这篇文章主要介绍了vue 如何使用递归组件，帮助大家更好的理解和使用vue，完成开发需求，感兴趣的朋友可以了解下2020-10-10
本文介绍了Vue3+Vite+Ts搭建脚手架的实现,步骤包括创建项目、选择技术栈、安装依赖及运行项目,旨在为开发者提供一个简易快速的搭建流程,感兴趣的可以了解一下2024-11-11
本文主要介绍了vue中ref实现子向父传值的示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-01-01
本文是脚本之家小编给大家整理的vue组件传值几种常用方法，非常不错，具有一定的参考借鉴价值，需要的朋友参考下吧2018-05-05
这篇文章主要介绍了vue引入css文件导致全局污染的问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-10-10
vue中Form 表单的 resetFields() 失效原因及问题解决
在Vue项目中,使用formRef.value.resetFields()方法重置表单时可能遇到不起作用的问题,下面就来介绍一下如何解决,感兴趣的可以了解一下2024-09-09
这篇文章主要介绍了Vue props传递的类型和写法,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-07-07
最新评论