Vue 不显示整个组件

【问题标题】：Vue doesn't show whole componentVue 不显示整个组件
【发布时间】：2022-01-10 09:30:20
【问题描述】：

我是 Vue 的新手。

我想把整个页面放到除了页眉和页脚之外的组件

Vue.component('main-block', {template: `
<section id="first-block">...</section>
<section id="second-block">...</section>
<section id="third-block">...</section>`})

当我在#app 块内写<main-page></main-page> 时，它只显示第一部分。为什么？

【问题讨论】：

标签： javascript vue.js

【解决方案1】：

按照文档：A-Single-Root-Element

您的组件中的根元素不能超过一个。

每个组件都必须有一个根元素

这意味着您必须将模板包装在根元素中，例如。一个div元素

例如：

Vue.component('main-block', {template: `
<div>
  <section id="first-block">...</section>
  <section id="second-block">...</section>
  <section id="third-block">...</section>
</div>`})

【讨论】：