template标签在vue组件中扮演怎样的角色？

最开始一直觉得template包裹一个组件代表着之后的部分为一个整体
后来发现其他人代码中出现template嵌套的情况就是很多嵌套div外都会包裹template 例如

<template>
   <div>
      <template>
            <div>
                <div>
                    <div></div>
                </div>
            </div>
    </template>
    <template>
            <div>
                <div>
                    <div></div>
                </div>
            </div>
    </template>
    <template>
            <div>
                <div>
                    <div></div>
                </div>
            </div>
    </template>
    <template>
            <div>
                <div>
                    <div></div>
                </div>
            </div>
    </template>
   </div>
 </template>

补充：这里的template不是指最外层的template 是单文件组件内部的template

1、这样写是否有什么好处？
2、template有什么明确语义？
3、在vue组件当中与div相比有何异同？

html5 html vue-cli vue.js

阅读 9.1k

6 个回答

SevenOutman

首先明确一点：你所说的组件是不是单文件组件？
如果是的话，单文件组件必须要用 <template> 标签来指定渲染模板。

至于这样写有什么好处，template 有什么明确语义，这个可以在文档中看到说明：

HTML <template> 元素是一种用于保存客户端内容的机制，该内容在页面加载时不被渲染，但可以在运行时使用 JavaScript 进行实例化。
可以将一个模板视为正在被存储以供随后在文档中使用的一个内容片段。

虽然, 在加载页面的同时,解析器确实处理 <template>元素的内容，这样做只是确保这些内容是有效的; 然而,元素的内容不会被渲染。

希望对你有帮助