Typescript Vue不'；如果前一个自终止，则不渲染第二个组件

在我的根组件App.vue中，我有以下模板代码：

<template>
<div class="app-wrapper">
    <Header></Header>
    <Panel></Panel>
    <Showcase/>
    <Modal/>
    <Footer/>
</div>
</template>

这与

页眉

、

展示

、

模式

和

页脚

是相同的

出于某些奇怪的原因，使用上述代码，只有标题、面板和Showcase组件渲染。如果我将

更改为

，则模式也会呈现。

不管组件是否自行终止其JSX，它都应该呈现吗

---

我是Vue的新手，我自己用TS和Parcel建立了这个项目，但我不知道这是否与此有关。

我认为这里最好引用Vue的官方风格指南：

没有内容的组件应该在DOM模板中自动关闭、字符串模板和-但决不能在DOM模板中关闭

您可以在此处找到完整的文档：

不幸的是，HTML不允许自定义元素只能自动关闭。这就是为什么只有当Vue的模板编译器能够在DOM之前到达模板，然后提供符合DOM规范的HTML时，该策略才可能实现

---

这是包裹捆扎机的已知问题。Parcel是一个HTML解析器，它与自定义的自动关闭HTML标记分离

作为临时解决方案，您必须告诉bundler显式识别自动关闭的自定义元素。将以下配置添加到package.json：

"posthtml": {
    "recognizeSelfClosing": true
}

正在以下线程中跟踪此问题：

---

和。

Vue模板必须是有效的HTML。self-closing标记是XHTML语法的，现在已经过时了。您可以按照Vue文档的样式指南进行操作

有关HTML中有效标记的更多信息，请参阅

"posthtml": {
    "recognizeSelfClosing": true
}