如果没有放入div中，vuejs组件会隐藏所有内容

Question

我开始使用包裹的vuejs。我有一个主要组件App.vue，在App模板中使用<Hello/>从中调用子组件Hello.vue。我有一个奇怪的错误，如果我不把<Hello/>放在div标签中，html之后的所有内容都没有显示。代码如下：

index.js

import Vue from "vue";
import App from "./App";

new Vue({
  el: "#app",
  components: { App },
  template: "<App/>"
});

App.vue

<template>
  <div id="app">
    <h3>bla bla</h3>

    <div><Hello/></div>
    <!-- if not put inside a div, hides everything after-->

    <h2>test</h2>
    <p>kldsfnlkdsjfldsfds</p>
    <h5>skjdnsqkfdnlkdsqf</h5>
  </div>
</template>

<script>
import Hello from "./components/Hello";

export default {
  name: "App",
  components: {
    Hello
  }
};
</script>

<style>
</style>

Hello.vue

<template>
  <div>
    <h1>{{ message }}</h1>
    <h2>Hello {{ person.firstname}} {{person.lastname}}</h2>
    <label>
      Firstname:
      <input type="text" v-model="person.firstname">
    </label>
    <label>
      Lastname:
      <input type="text" v-model="person.lastname">
    </label>
    <label>
      Message:
      <input type="text" v-model="message">
    </label>
  </div>
</template>

<script>
export default {
  data() {
    return {
      person: {
        firstname: "John",
        lastname: "Doe"
      },
      message: "Welcome !"
    };
  }
};
</script>

<style>
</style>

这是我没有用qazxsw poi qazxsw poi包装qazxsw poi然后用div：<Hello/>得到的截图

谢谢 ！

编辑：我没有在控制台中收到错误。我忘了添加我尝试使用webpack并且我没有得到这个bug，所以它很可能与parcel有关。

Answer 1

如果某些浏览器使用没有结束标记的<div></div>而不是，则它们无法正确显示元素。

如果未使用结束标记呈现项目，则可能是您的问题。

一些组件将从您的模板生成结束标记，即使您的源代码中没有它，而其他组件则不会。

Answer 2

使用SFC（单个文件组件）时，<foo />中必须只有一个元素。然后，在那个元素中，您可以拥有任意数量的其他元素。

看看“示例沙盒”在官方文档中做简单的应用程序：<foo></foo>

文件vue就是一个很好的例子：<template>