Question

这就是我的子组件的样子：

<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>

Answer 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>

Answer 2

尝试将标记用作您的根标记。我曾经这样做并且效果很好。

就像：

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

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

2 个答案: