当插入一个新组件时，其余所有组件都会在应用程序中消失答案

【问题标题】：When a new component is inserted all the rest disappears inside the app当插入一个新组件时，其余所有组件都会在应用程序中消失
【发布时间】：2018-09-06 21:30:40
【问题描述】：

我总是使用 vue-cli 构建我的 SPA 应用程序。

这次我正在构建一个小项目，并且我正在包含带有脚本标签的 Vue。

但我不理解以下行为。

// app.js

Vue.component('todo-item', {
  template: `<div>Todo Component!</div>`
})

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue App!'
  }
})

HTML 索引.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Title</title>
</head>
<body>

  <div id="app">

    {{ message }}

    <div>
      Just some content...
    </div>

  </div>

  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script src="./js/app.js"></script>
</body>
</html>

结果是这样的：

现在，我将尝试在 HTML 中添加 '<todo-item />' 组件：

<div id="app">

    {{ message }}

    <todo-item />

    <div>
      Just some content...
    </div>

  </div>

“只是一些内容...”的文字消失了：

我做错了什么？

【问题讨论】：

标签： vue.js vuejs2

【解决方案1】：

TL;DR;

用<todo-item></todo-item>代替<todo-item/>

未编译的 vue.js 不支持自闭合 html 标签。

参见样式指南：

不幸的是，HTML 不允许自定义元素自动关闭 - 只有官方的“无效”元素。这就是为什么策略只有当 Vue 的模板编译器之前可以到达模板时可能 DOM，然后提供符合 DOM 规范的 HTML。

https://vuejs.org/v2/style-guide/#Self-closing-components-strongly-recommended

以及 github 中的问题：

https://github.com/vuejs/vue/issues/1036
https://github.com/vuejs/vue/issues/8664

【讨论】：