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相同。

出于某种奇怪的原因，使用上述代码，仅“标题”，“面板”和“展示”组件会呈现。如果我将<Showcase/>更改为<Showcase></Showcase>，则Modal也会渲染。

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

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

Answer 1

这是包裹捆绑器的已知问题。 Parcel的posthtml作为HTML解析器，与自定义的自动关闭HTML标签不符。

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

"posthtml": {
    "recognizeSelfClosing": true
}

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

Answer 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时，才可以采用该策略的原因。

Answer 3

Vue模板必须是有效的HTML。自闭合标签具有XHTML语法，现在已经过时。您可以按照Vue文档 Official Style Guide Vuejs

的样式指南进行操作

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

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

3 个答案: