Component template should contain exactly one root element.

最新推荐文章于 2022-08-26 19:24:07 发布

原创最新推荐文章于 2022-08-26 19:24:07 发布 · 320 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

vue 专栏收录该内容

17 篇文章

订阅专栏

本文讨论了在Vue组件开发中遇到的错误——Component template should contain exactly one root element。解释了该错误意味着组件模板需要一个根元素来包裹所有内容，并提供了错误代码示例及其修正方法。

vue组件化开发遇到的问题，问题描述：

(Emitted value instead of an instance of Error)
  Error compiling template:

  <MainHeader/>
  <MainSearch/>

  - Component template should contain exactly one root element. If you are using v-if on multiple elements, use v-else-if to chain them i
nstead.


 @ ./src/components/content/main/MainBody.vue 11:0-376
 @ ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./src/App.vue
 @ ./src/App.vue
 @ ./src/main.js
 @ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./src/main.js

每次遇到一大串英文报错就头疼，就欺负我这种vue小白，英语渣渣。冷静下来（用翻译软件）翻译一下其中最关键的一句话

Component template should contain exactly one root element.：
组件模板应该只包含一个根元素。

就是多个组件之间必须有一个根元素，不能直接使用，并且也标明了报错的位置：

Error compiling template:

  <MainHeader/>
  <MainSearch/>

原来错误的代码：

<template>
    <MainHeader/>
    <MainSearch/>
</template>

修改后正确的代码：

<template>
  <div>
    <MainHeader/>
    <MainSearch/>
  </div>
</template>