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

学习知识要善于思考，思考，再思考！今天golang学习网小编就给大家带来《为什么 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>

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

今天关于《为什么 Vue 组件在同一个 div 中只加载一个？》的内容介绍就到此结束，如果有什么疑问或者建议，可以在golang学习网公众号下多多回复交流；文中若有不正之处，也希望回复留言以告知！