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>, то модал также рендерит.

Разве он не должен рендериться независимо от того, завершает ли компонент self свой JSX?

I 'Я новичок в Vue и сам создал проект с TS и Parcel, но я не знаю, имеет ли это какое-либо отношение к этому.

Answer 1

Это известная проблема с Parcel bundler.

Parcel *1003* posthtml

как синтаксический анализатор HTML, который нарушает пользовательские самозакрывающиеся теги HTML.

*1006* В качестве временного решения вы должны указать, что упаковщик явно распознает самозакрывающиеся пользовательские элементы.Добавьте следующую конфигурацию в ваш package.json:

"posthtml": {
    "recognizeSelfClosing": true
}

Эта проблема отслеживается здесь в следующих темах: issue-1 и issue-2 .

Answer 2

Шаблоны Vue должны быть действительным HTML. Самозакрывающиеся теги имеют синтаксис XHTML и в настоящее время устарели. Вы можете следовать руководству по стилю документации Vue Официальное руководство по стилю Vuejs

для получения дополнительной информации о допустимых тегах в HTML см. Допустимы ли (не пустые) самозакрывающиеся теги в HTML5?

Answer 3

Я думаю, что лучше всего здесь процитировать официальное руководство по стилю vue:

Компоненты без содержимого должны автоматически закрываться в однофайловые компоненты , строковые шаблоныи JSX - но никогда в шаблонах DOM.

Полная документация приведена здесь: https://vuejs.org/v2/style-guide/#Self-closing-components-strongly-recommended

К сожалению, HTML этого не делаетt допускает самозакрытие пользовательских элементов - только официальные «пустые» элементы .Вот почему такая стратегия возможна только тогда, когда компилятор шаблонов Vue может получить доступ к шаблону до DOM, а затем предоставить HTML-код, соответствующий спецификации DOM.