vue中具有单个根元素的多个子组件答案

【问题标题】：Multiple child component with single root element in vuevue中具有单个根元素的多个子组件
【发布时间】：2018-07-25 01:27:25
【问题描述】：

这是我的子组件的样子：

<template>
<div class="body">
    <div class="block">
      Lorem ipsum dolor sit amet
    </div>
</div>
</template>
<script>
    export default {
        name: 'block'
    }
</script>

从我的父组件，我想做这样的事情：

<div>
    <block></block>
    <block></block>
    <block></block>
</div>

...但没有每次复制周围的根 .body div 元素。

我想要这样的东西：

<div class="body">
    <div class="block">
      Lorem ipsum dolor sit amet
    </div>
    <div class="block">
      Lorem ipsum dolor sit amet
    </div>
    <div class="block">
      Lorem ipsum dolor sit amet
    </div>
    <div class="block">
      Lorem ipsum dolor sit amet
    </div>
</div>

而不是这个：

<div class="body">
    <div class="block">
      Lorem ipsum dolor sit amet
    </div>
</div>
<div class="body">
        <div class="block">
          Lorem ipsum dolor sit amet
        </div>
</div>
<div class="body">
        <div class="block">
          Lorem ipsum dolor sit amet
        </div>
 </div>

【问题讨论】：

不想重复 .body 类？或者你不想为你的 .vue 模板添加一个起始元素标签？
@hamzox 问题已更新
为什么不简单地从组件文件中删除.body，只保留.block，并使用.body，将声明的组件包装在父组件中？
@BelminBedak 想象一下我需要使用大量.body div 元素的情况。如何减少使用量？
然后为 .body div 制作一个组件。

标签： javascript vue.js

【解决方案1】：

根据您的问题，这是我的理解。
像这样制作你的单文件 vue 组件。

<template>
    <div class="block">
        Lorem ipsum dolor sit amet
    </div>
    </template>
    <script>
        export default {
            name: 'block'
        }
    </script>

你的父 div：

<div class="body">
    <block></block>
    <block></block>
    <block></block>
</div>

【讨论】：

【解决方案2】：

尝试使用标签作为你的根标签。我曾经这样做并且效果很好。

是这样的：

<template>
 <literal>
  <div id="1"></div>
  <div id="2"></div>
 </literal>
</template>

【讨论】：