vue 中关于“template”标签的两个报错
vue
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
项目地址:https://gitcode.com/gh_mirrors/vu/vue
免费下载资源
·
1.template本身没有很特别的意义,可以了解下html 的template标签
2.官网以及其他人所描述的“根元素”,是指template标签下的元素,不包括也不是template本身
3.经常2个错误:
Component template should contain exactly one root element.
<template>
<div>1</div>
<div>2</div>
</template>
如上面所说:根元素是指template里面第一层的同级元素,这里同级元素有2个,也就是有2个根元素了(根元素就是那两个div)。
tempalate下面第一层同级元素只能有一个,即所谓的只能有一个根元素
Cannot use <template> as component root element because it may contain multiple nodes.
这个错就是题主的错误,这个错误的意思是template下面不能使用template来做根元素,因为template本身就不能够保证不犯上面的错误。
举个例子:不是说根元素只允许一个吗,那我再用个template来做根元素不就好了,比如
<template>
<template>
...
</template>
</template>
不好意思,NO!因为你本身就不能保证这个用来做根元素的template它自己只有一个根元素,也就是第二个template里的“...”不一定只有一个根元素,这是vue不允许的。
题主就是第二个错误:题主想用template来做一个根元素,但是这个template里面有label和input 两个同级元素了,也就是不只一个根元素了。
note:当然,template下面第一层同级元素只允许一个只是针对根元素来讲的,当里面嵌套的template已经和根元素没什么关系了,就可以为所欲为!
例子:
<template>
<div>
<template>
<template>
232432
</template>
</template>
</div>
</template>
如有不对,请指正^_^
GitHub 加速计划 / vu / vue
207.54 K
33.66 K
下载
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
最近提交(Master分支:2 个月前 )
73486cb5
* chore: fix link broken
Signed-off-by: snoppy <michaleli@foxmail.com>
* Update packages/template-compiler/README.md [skip ci]
---------
Signed-off-by: snoppy <michaleli@foxmail.com>
Co-authored-by: Eduardo San Martin Morote <posva@users.noreply.github.com> 4 个月前
e428d891
Updated Browser Compatibility reference. The previous currently returns HTTP 404. 5 个月前
更多推荐
已为社区贡献2条内容
所有评论(0)