为什么 Vue 组件在同一个 div 中只加载一个？

两个 vue 组件仅加载一个

在 div 中同时包含两个 vue 组件时，有时会出现仅加载一个组件的情况。代码示例如下：

<div class="content">
  <header-bar/>
  <nav-bar/>
  <script src="../assets/scripts/base.js"></script>
  <script src="../assets/scripts/index.js"></script>
  <script>
    var vm = new vue({
      el: ".content",
      data: {}
    })
  </script>
</div>

为了解决这个问题，需要将组件标签从自闭合标签（例如<header-bar/>）更改为非自闭合标签（例如<header-bar></header-bar>）。修改后的代码如下：

<div class="content">
  <header-bar></header-bar>
  <nav-bar></nav-bar>
  <script src="../assets/scripts/base.js"></script>
  <script src="../assets/scripts/index.js"></script>
  <script>
    var vm = new Vue({
      el: ".content",
      data: {}
    })
  </script>
</div>

通过这些修改，两个组件现在可以同时加载了。