Vue入门求助：无法在同一Vue实例中渲染多个组件

嘿，刚接触Vue遇到这个问题太正常啦！你已经正确定义了两个全局组件，现在只需要把它们放到Vue实例的作用域里就能同时渲染了，我给你整理好完整的可运行代码：

<!-- 先在HTML里准备好Vue的挂载容器 -->
<div id="app">
  <!-- 直接在这里使用你定义的两个组件标签 -->
  <mat-example></mat-example>
  <button-counter></button-counter>
</div>

<script>
// 你的两个组件定义完全没问题，直接保留即可
Vue.component('mat-example', {
  data: function () {
    return { count: 0 }
  },
  template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>'
})

Vue.component('button-counter', {
  data: function () {
    return { count: 0 }
  },
  template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>'
})

// 最后创建Vue实例并挂载到上面的#app容器
new Vue({
  el: '#app'
})
</script>

关键细节说明： #

• 你之前只完成了组件定义，但没把组件放到Vue实例能管理的模板区域，也没初始化Vue实例挂载到DOM上。Vue需要一个挂载点（比如上面的#app）来接管页面的渲染逻辑。
• 全局组件定义后，就可以像普通HTML标签一样在Vue实例的模板里使用，两个组件的count数据是完全独立的，点击其中一个不会影响另一个的计数。
• 组件名在HTML里要使用短横线分隔（比如mat-example），这是Vue的规范，能避免和原生HTML标签冲突。

这样运行页面后，你就能看到两个独立的点击计数器按钮正常工作啦！

内容的提问来源于stack exchange，提问作者Complexity