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

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

父组件：

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

<script>
  ....
</script>

....

子组件（my-component-2）：

....

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

...

但是

my-component-3

不是“呈现”的，但是如果我将

包装在一个div中（就像在调用my-component-2的父组件中一样），那么它就工作了

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

组件的

只能有一个直接子节点

由于您的

my-component-3

组件的根元素使用了

v-for

，因此无法渲染，因为它将有多个子节点

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

组件的

只能有一个直接子节点

由于您的

my-component-3

组件的根元素使用了

v-for

，因此无法渲染，因为它将有多个子节点

---

在另一个组件的模板中使用组件时，您永远不需要在任何元素中包装组件。

这应该起作用：不呈现

my-component-3

是什么意思？里面有什么？@thanksd如果我使用“单文件组件”，它能工作吗？这就是我测试它的方式。是的，无论哪种方式都应该有效。您的

my-component-3

模板是什么样子的？我知道我的问题应该是什么。。。在

my-component-3

中有一个

v-for

。因此答案是：不，不需要将组件包装在div中，但是组件的模板必须只有一个根元素。您的

my-component-3

没有显示，因为它没有一个根元素。这应该可以工作：什么意思

my-component-3

没有呈现？里面有什么？@thanksd如果我使用“单文件组件”，它能工作吗？这就是我测试它的方式。是的，无论哪种方式都应该有效。您的

my-component-3

模板是什么样子的？我知道我的问题应该是什么。。。在

my-component-3

中有一个

v-for

。因此答案是：不，不需要将组件包装在div中，但是组件的模板必须只有一个根元素。您的

my-component-3

没有显示，因为它没有一个根元素。

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

<script>
  ....
</script>

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

<script>
  ...
</script>