Vue中无法渲染多个组件

Question

我刚开始使用 Vue，我已经定义了 2 个组件，但是，我无法在同一个“Vue”实例中呈现它们。

这是我的 2 个组件：

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”入口点：

var app = new Vue({
  el: '#app'
});

在我的 HTML 中，我确实有以下代码：

<div id="app">
    <button-counter />
    <mat-example />
</div>

“Vue”开发工具仅显示“按钮计数器”组件：

如果我删除“按钮计数器”，“垫示例”会显示在 Vue 开发者工具中。

为什么我无法在我的 Vue 入口点中渲染这两个组件？

Answer 1

这将起作用：

<div id="app">
    <button-counter></button-counter>
    <mat-example></mat-example>
</div>

演示：

  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>'
  })

  var app = new Vue({
    el: '#app'
  })

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
    <div id="app">
        <button-counter></button-counter>
        <mat-example></mat-example>
    </div>

Answer 2

使用这个标签而不是使用自闭标签

<div id="app">
    <button-counter></button-counter>
    <mat-example></mat-example>
</div>