Vue 在一个文件组件中'template'多个标签

Question

我在一家大型前端团队工作，在单个文件组件中使用多个模板标签。在那之前，我从未见过这样的事情，对我来说，这是不好的练习。但当我问及这个问题时，首席开发人员认为我很愚蠢。谁能给我解释一下，我什么时候必须用它，为什么?如果可能的话，请提供链接到价值的文件。是的，我们使用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>只是一种处理循环或条件的方法，而不需要在DOM中插入额外的节点。

你可以把v-if或v-for直接放在<VRow>上，而不是放在包装它的<template>上，但有时这是不希望的——如果已经有其他条件，你想保持分开，或者如果你想在相同的条件下包装多个节点，就像在你的例子中，你在一个<template>中包含了<VRow>和<VDivider>。

这不是一个坏的做法，没有任何不良的性能影响。你的首席开发人员应该能够更好地与你沟通，而不是说你"愚蠢"。

Answer 2

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