如果不放在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>

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

谢谢！

编辑：控制台中没有错误。我忘了补充说，我曾尝试过使用webpack，但没有得到这个错误，因此很可能与包裹有关。

Answer 1

使用SFC（单个文件组件）时，在<template> 中必须只有一个元素。然后，在该元素内，您可以根据需要选择其他元素。

在官方文档https://vuejs.org/v2/guide/single-file-components.html#Example-Sandbox

中查看“示例沙箱” 简单易用的应用。

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

Answer 2

如果某些浏览器使用/*---------- Search ----------*/ .result-bucket li { padding: 7px 15px; } .instant-results { background: #fff; width: 100%; color: gray; position: absolute; top: 100%; left: 0; border: 1px solid rgba(0, 0, 0, .15); border-radius: 4px; -webkit-box-shadow: 0 2px 4px rgba(0, 0, 0, .175); box-shadow: 0 2px 4px rgba(0, 0, 0, .175); display: none; z-index: 10; } .form-search { transition: all 200ms ease-out; -webkit-transition: all 200ms ease-out; -ms-transition: all 200ms ease-out; } .search-form { position: relative; max-width: 100%; } .result-link { text-decoration:none!important; } .result-link .media-body { font-size: 13px; color: gray; } .result-link .media-heading { font-size: 15px; font-weight: 400; } .result-link .media-object { width: 50px; padding: 3px; margin-right:10px; border: 1px solid #c1c1c1; border-radius: 3px; } .result-entry + .result-entry { border-top:1px solid #ddd; } .wizard { position: relative!important; } #results { postion: absolute!important; width: 100%; top: 50px; /* Height of input */ left: 0; } 而不是<foo />而不带有结束标记，则不能正确显示元素。

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

即使您的源代码中没有<foo></foo>组件，它们也会从模板中生成结束标记，而其他组件则不会。