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

Question

我开始使用带有 parcel 的 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>

这是我在没有用 <div></div> 包装 <Hello/> 的情况下得到的屏幕截图然后使用 div：

谢谢！

编辑：我在控制台中没有收到错误。我忘了补充一点，我尝试使用 webpack，但没有遇到这个错误，所以它很可能与包裹有关。

Answer 1

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

看看官方文档中的"Example sandbox"简单易行的app：https://vuejs.org/v2/guide/single-file-components.html#Example-Sandbox

文件 ToDoList.vue 就是一个很好的例子：https://codesandbox.io/s/o29j95wx9

Answer 2

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

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

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

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

vuejs component hides everything after if not put inside a div

javascript

vue.js

vuejs2

parceljs