如果前一个自终止，Vue 不会渲染第二个组件答案

【问题标题】：Vue doesn't render second component if the previous self-terminates如果前一个自终止，Vue 不会渲染第二个组件
【发布时间】：2019-10-27 14:29:40
【问题描述】：

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

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

我只是想模拟一个我正在构建的应用程序，所以这些部分没有嵌套并且不包含任何有意义的内容。

这些 Vue 组件中的每一个都在其.vue 中包含以下内容：

<template>
  <div class="panel-wrapper">Panel</div>
</template>

<script lang="ts">
import Vue from "vue";
export default Vue.extend({
  name: "Panel"
});
</script>


<style lang="scss">
.panel-wrapper {
  background: orange;
  font-size: 1.75rem;
}
</style>

Header、Showcase、Modal 和 Footer 也是如此。

出于某种奇怪的原因，使用上面的代码，只有 Header、Panel 和 Showcase 组件呈现。如果我将<Showcase/> 更改为<Showcase></Showcase>，那么模态也会呈现。

不应该不管组件自身是否终止其 JSX 都渲染吗？

我是 Vue 的新手，我自己使用 TS 和 Parcel 设置项目，但我不知道这是否与它有关。

【问题讨论】：

标签： typescript vue.js parceljs

【解决方案1】：

这是 Parcel 捆绑器的一个已知问题。 Parcel 的 posthtml 作为 HTML 解析器，它会与自定义的自关闭 HTML 标记中断。

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

"posthtml": {
    "recognizeSelfClosing": true
}

在以下线程上跟踪此问题： issue-1 和 issue-2。

【讨论】：

【解决方案2】：

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

没有内容的组件应该在single-file components、字符串模板和JSX 中自动关闭 - 但在 DOM 模板中永远不会。

您可以在这里找到完整的文档：https://vuejs.org/v2/style-guide/#Self-closing-components-strongly-recommended

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

【讨论】：

【解决方案3】：

Vue 模板必须是有效的 HTML。自闭标签是 XHTML 语法，现在已经过时了。你可以按照Vue文档 Official Style Guide Vuejs的样式指南进行操作

有关 HTML 中有效标签的更多信息，请参阅Are (non-void) self-closing tags valid in HTML5?

【讨论】：