我是否总是需要将组件内容包装在div（或类似文件）中？

Question

我正在Vue2中创建单个文件组件，并且包括一个子组件：

父组件：

<template>
  <div>
     <my-component-2>
     </my-component-2>
  </div>
</template>

<script>
  ....
</script>

子组件（my-component-2）：

<template>
     <my-component-3>
     </my-component-3>
</template>

<script>
  ....
</script>

孙子组件（my-component-3）：

<template>
     <div v-for="(item, index) in items">
     </div>
</template>

<script>
  ...
</script>

但是my-component-3不是“渲染的”，但是，如果我将<my-component-3>div 包裹起来（就像在调用my-component-2的父组件中一样），那么它将起作用。

有没有一种方法可以调用子组件而不将其包装在任何html标记中？

Answer 1

该<template>组件的只能有一个直接子节点。

由于my-component-3组件的根元素使用了v-for，因此无法呈现，因为它将有多个子节点。

在另一个组件的模板中使用某个组件时，您无需将其包装在任何元素中。