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

Question

在我的根组件 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 设置了项目，但我不知道这是否与它有任何关系。

Answer 1

我认为最好的办法是引用官方的 vue 风格指南：

Components with no content should be self-closing in single-file components, string templates, and JSX - but never in DOM templates.

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

Unfortunately, HTML doesn’t allow custom elements to be self-closing - only official “void” elements. That’s why the strategy is only possible when Vue’s template compiler can reach the template before the DOM, then serve the DOM spec-compliant HTML.

Answer 2

这是 Parcel 捆绑器的一个已知问题。 Parcel 的 posthtml 作为 HTML 解析器，与自定义 self-closing HTML 标签分开。

作为临时解决方案，您必须告诉捆绑程序明确识别 self-closing 自定义元素。将以下配置添加到您的 package.json:

"posthtml": {
    "recognizeSelfClosing": true
}

正在以下线程中跟踪此问题： issue-1 and issue-2.

Answer 3

Vue 模板必须是有效的 HTML。自闭标签是 XHTML 语法，现在已经过时了。您可以遵循 Vue 文档的样式指南 Official Style Guide Vuejs

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

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

Vue doesn't render second component if the previous self-terminates

typescript

vue.js

parceljs