What's the use of <template> within a <template> in VueJS 2?

Question

I'm trying to understand the use case of <template> and it's functions. Having referenced the docs, I'm still left fairly confused.

考虑any.vue文件中的以下代码：

<template>
   <div class="top-right links">

      <!-- Why use <template> here instead of a div, for example? -->
      <template v-if="authenticated">
         <router-link :to="{ name: 'home' }">
            {{ $t('home') }}
         </router-link>
      </template>

      <template v-else>
         <router-link :to="{ name: 'login' }">
            {{ $t('login') }}
         </router-link>
      </template>

   </div>
</template>

我们为什么会用<template>，而不是只是一个简单的<div>，以及如何使用<template>比说的不同，使用<custom-component>？

Answer 1

你是对的，在你的情况下，你应该简单地使用这个：

<template>
   <div class="top-right links">
     <router-link v-if="authenticated" :to="{ name: 'home' }">
        {{ $t('home') }}
     </router-link>
     <router-link v-else :to="{ name: 'login' }">
        {{ $t('login') }}
     </router-link>
   </div>
</template>

但是假设您需要有条件的多个标签而不使用父标签：

<template v-if="ok">
  <h1>Title</h1>
  <p>Paragraph 1</p>
</template>

阅读更多 ：

• 有条件组与v-if上<template>
• v-for 在一个 <template>

Answer 2

<template>在主文件内部<template>的任何使用都.vue意味着我们想要使用一个不可见的包装器。现在的问题是我们什么时候需要使用隐形包装纸？答案很简单：每当我们想要对一组元素（而不是单个v-if元素）使用,v-else或v-for指令时。

因此，在这种情况下，我们使用以下方法包装所有提到的元素组：

<template v-if = " "></template>

通过这样做，我们只需渲染上述<template>标签之间的内容，无需创建冗余<div>，然后渲染后，<template>标签本身将不存在于 DOM 中，因此它作为一个不可见的包装器很好地完成了它的工作。

Answer 3

据我了解，使用<template>不会在DOM中渲染出多余的元素。当您有条件地添加不需要父元素的多个元素时，它特别有用<div>。如果<div>除了有条件的多个标签之外，这些服务器没有其他用途，那么无需额外的操作即可<div>。

我通常会默认使用，<template>直到我需要a <div>或其他元素作为父容器，主要是应用样式。