vue 中关于“template”标签的两个报错

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>

如有不对,请指正^_^

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值