Question

我与大型前端团队一起工作，人们在单个文件组件中使用多个模板标签。在此之前，我从未见过这样的事情，对我来说这是不好的做法。但是当我问起这个问题时，首席开发人员认为我很困惑。有人可以解释一下，我什么时候必须使用它，为什么？如果可能，请提供 vue 文档的链接。是的，我们使用 vuetify。

示例：

<template>
  <VContainer>
    <VRow>
      <VCol>
        <h2>
          {{ title }}
        </h2>
        <p>
          {{ subtitle }}
        </p>
      </VCol>
    </VRow>

    <Share />

    <template v-if="p.length > 0">
      <VRow>
        <VCol>
          {{ text }}
        </VCol>
      </VRow>

      <VDivider/>
    </template>

    <template v-for="(t, index) in ts">
      <VRow :key="index">
        <VCol v-if="t.p.length > 0">
          {{ text }}
        </VCol>
      </VRow>

      <VDivider
        v-if="index < t.length - 1"
        :key="`divider-${index}`"
        class="mx-3"
      />
    </template>

  </VContainer>
</template>

Answer 1

我认为使用多个template没有关系，我们不应该使用div包装条件渲染组件，div会插入到DOM中。这是官方的 documemnt https://vuejs.org/v2/guide/conditional.html#Conditional-Groups-with-v-if-on-lt-template-gt

Answer 2

此处使用的 <template> 只是一种处理循环或条件的方法，无需在 DOM 中插入额外的节点。

您可以将 v-if 或 v-for 直接放在 <VRow> 上，而不是放在包装它的 <template> 上，但有时这是不可取的——如果已经有其他您想保持分开的条件，或者如果您想将多个节点包装在相同的条件中，例如在您的示例中，您在单个 {{1} 中同时包含 <VRow> 和 <VDivider> }}。

这不是坏习惯，根本没有不良的性能影响。您的首席开发人员应该能够更好地向您传达这一点，而不是称您为“愚蠢的”。

vue 在一个文件组件中使用多个标签“模板”

2 个答案: