我是否总是需要将组件内容包装在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，因此它无法呈现，因为它会有多个子节点。

在其他组件的模板中使用组件时，永远不需要将组件包装在任何元素中。