typescript - 如果前一个组件自行终止，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>然后 Modal 也会呈现。

无论组件是否自行终止其 JSX，它都不应呈现吗？

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

Answer 1

这是 Parcel bundler 的一个已知问题。包裹的posthtml作为一个 HTML 解析器，它打破了自定义的自关闭 HTML 标签。

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

"posthtml": {
    "recognizeSelfClosing": true
}

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