Html Vue错误：“模板根目录只需要一个元素”

我有以下组件

组成部分

我和布菲有一张b桌。我想从当前组件导入组件

但是，当我在所需位置插入组件时，会发生错误

如果我把一个部件放在它下面，我的桌子就坏了

---

如何解决此问题？

模板中只能有一个根元素。因此，如果您希望使用类包装器作为div的同级，则需要将这两个类包装到父div，如下所示：

<template>
  <div>
    <post-form/>
    <div class="wrapper">
        <b-table :data="posts">
            <template slot-scope="props">
                <b-table-column field="completed" label="complete">
                    <b-checkbox 
                      v-model="props.row.done">
                    </b-checkbox>
                </b-table-column>
            </template>
        </b-table>
    </div>
  </div>
</template>

---

也许您正在使用Vue3，而您的eslint配置仍然是VUE2

尝试编辑您的.eslintrc.json或类似内容：

{
  // ...
  "extends": ["eslint:recommended", "plugin:vue/vue3-essential"],
  // ...
}

---

查看此处的参考资料：

我遵循了您的代码，但之后我的表仍然被破坏。啊！我删除了我的帖子表单的样式范围，效果很好。为什么我的样式范围会影响父组件？您是如何应用样式范围的？查看此处的链接了解更多详细信息。这是为Vue3新手准备的，Vue3现在从2020年开始提供您是真正的mvp@Sheldon实际上，我必须通过Vue 3 CLI创建一个全新的Vue 3项目来实现这一点

{
  // ...
  "extends": ["eslint:recommended", "plugin:vue/vue3-essential"],
  // ...
}