Vue에서 여러 구성 요소를 렌더링할 수 없음

Vue에서 여러 구성 요소를 렌더링할 수 없음

이제 막 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 Developer Tools에 'mat-example'이 표시됩니다.

Vue 엔트리 포인트에서 이들 2개의 컴포넌트를 렌더링할 수 없는 이유는 무엇입니까?

이 동작은 유효합니다.

<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>

자동 닫기 태그 대신 이 태그 사용

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

언급URL : https://stackoverflow.com/questions/49829162/cannot-render-multiple-components-in-vue