vue散记:根template只能有一个子元素

vue散记:根template只能有一个子元素

  • 前言
  • 根template只能有一个子元素
    • 1.现象
    • 2.原因

前言

  之前使用过别人写的vue+element项目,在别人搭建好的框架下修修改改、缝缝补补,感觉还行,整体流程还能走的通,但是不能总是用别人搭建好的框架啊。于是就想着自己也用vue-cli搭建一套,搭建的过程中也遇到了些问题,有些不理解的,就记下来,因为比较散,就写个散记系列吧。



根template只能有一个子元素

1.现象

每个组件文件中的根template,也就是最外层的template只能有一个子元素。非根template没有限制,可以有多个。以下的template均指的是根template,不要混淆了。
当template有多个子元素时,报错,如下
vue散记:根template只能有一个子元素_第1张图片
意思是说,每个template根元素只能有一个元素。
这个时候,可以进行修改,可以在所有的子元素外层,包一个div,如下:
vue散记:根template只能有一个子元素_第2张图片

2.原因

  vue在动态创建dom的时候,会将template中的子元素作为入口进行创建,根据这个入口,遍历以该子元素作为根节点的整个节点树,然后创建虚拟dom。template用于创建单文件组件,实际上是一种原子化的设计,可以一次定义,然后在任何地方生成dom,如果有多个子元素,就违背了这种原子设计,也就是说,一个template就只会渲染一个子组件树。如果template有多个子元素,那么vue就无法获取确切入口,就得刻意去指定某个元素作为根节点,而同时其他节点也就成为了费节点,这样无疑就增大了程序设计的复杂性,而且还增加了无用代码,有必要吗,木有啊。所以,在语法检查的时候,就会进行校验,防止出现费力不讨好的情况发生。



更多内容,请关注我的个人网站 爱秀逗 www.5ixiudou.com

你可能感兴趣的:(vue,前端)