javascript - VueJS 2 模板

Question

我是新 VueJS 学生!

我做了一个“MainTemplate.vue”，有菜单、页脚、页眉...因此，创建另一个名为“ComponentB.vue”的.vue。

这是我的代码ComponentB.vue

<template>  
    <h1>Component B</h1>
</template>  

就这么简单。我将其导入到我的“MainTemplate.vue”中并且运行良好。但我不知道为什么如果这个模板“ComponentB.vue”有很多代码，它就不起作用。

看，我简单地向我的“ComponenteB.vue”添加更多代码

<template>  
    <h1>Component B</h1>
    <h1>Component B</h1>
    <h1>Component B</h1>
    <h1>Component B</h1>
    <h1>Component B</h1>
    <h1>Component B</h1>
</template>  

当我保存时，浏览器向我发送此错误:

client?cd17:139 ./~/vue-loader/lib/template-compiler?{"id":"data-v-4e4e09bc","hasScoped":false}!./~/vue-loader/lib/selector.js?type=template&index=0!./src/ComponenteB.vue
(Emitted value instead of an instance of Error) 
  Error compiling template:

  <h1>Component B</h1>
  <h1>Component B</h1>
  <h1>Component B</h1>
  <h1>Component B</h1>
  <h1>Component B</h1>
  <h1>Component B</h1>

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/ComponenteB.vue 6:2-198
 @ ./src/routes.js
 @ ./src/main.js
 @ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./src/main.js

为什么我不能在里面放入更多代码？有人可以帮我吗？

非常感谢!!

Answer 1

它就在错误消息中:

Component template should contain exactly one root element

将 ComponentB.vue 模板的内容包装在 div 中，以便它具有一个根元素:

<template>  
  <div>
    <h1>Component B</h1>
    <h1>Component B</h1>
    <h1>Component B</h1>
    <h1>Component B</h1>
    <h1>Component B</h1>
    <h1>Component B</h1>
  </div>
</template>