导入其他组件"exactly one root element."

Question

对不起新手问题。我正在尝试渲染带有子元素和父项的 .vue 文件，但出现"多个根元素"错误。令我感到奇怪的是，正在导入的组件应该包装在一个<div>中 - 因此，我不明白为什么会有不止一个根元素。

当我导入ServerList.vue并分别ServerDetails.vue到我的App.vue(主(文件中时，这是有效的。

代码 (ServerReadouts.vue(：

<template>
</div class="row">
<server-list></server-list>
<server-details></server-details>
</div>
</template>
<script>
import ServerList from './ServerList.vue'
import ServerDetails from './ServerDetails.vue'
export default {
components: {
'server-list': ServerList,
'server-details': ServerDetails
}
}
</script>
<style>
</style>

代码 (App.vue(：

<template>
<div class="container">
<app-header></app-header>
<app-server-readouts></app-server-readouts>
<app-footer></app-footer>
</div>
</template>
<script>
import Header from './Header.vue'
import Footer from './Footer.vue'
import ServerReadouts from './ServerReadouts.vue'
export default {
components: {
'app-header': Header,
'app-footer': Footer,
'app-server-readouts': ServerReadouts,
}
}
</script>
<style>
</style>

控制台错误：

./~/vue-loader/lib/template-compiler.js?id=data-v-7ea00901!./~/vue-loader/lib/selector.js?type=template&index=0!./src/ServerReadouts.vue
template syntax error Component template should contain exactly one root element. If you are using v-if on multiple elements, use v-else-if to chain them instead.
@ ./src/ServerReadouts.vue 11:23-154
@ ./~/babel-loader/lib!./~/vue-loader/lib/selector.js?type=script&index=0!./src/App.vue
@ ./src/App.vue
@ ./src/main.js
@ multi main

Answer 1

基本上是因为您的ServerReadouts.vueHTML结构中的拼写错误。所以你只是这样定义它：

<template>
</div class="row">
<server-list></server-list>
<server-details></server-details>
</div>
</template>

其中，这里根本没有开放div，因此由于每个组件都应该有一个根，因此在您的情况下，它会将其视为四个不同的元素作为根。这是两个divs，server-list和server-details。所以最终的渲染结果将是这样的：

<template>
<div></div>
<server-list></server-list>
<server-details></server-details>
<div></div>
</template>

这根本不正确。

因此，要修复它，您可以这样做：

<template>
<div class="row">
<server-list></server-list>
<server-details></server-details>
</div>
</template>