javascript - Cannot render multiple components in Vue - Stack Overflow

admin管理员组

文章数量:1399788

I'm just starting with Vue and I have defined 2 ponents, however, I cannot render them in the same 'Vue' instance.

Here are my 2 ponents:

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

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

Next, I do have the 'Vue' entry point defined:

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

And in my HTML, I do have the following code:

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

The 'Vue' development tools does only show the 'button-counter' ponent:

If I remove the 'button-counter', the 'mat-example' is showed up in the Vue Developer Tools.

How does it e that I cannot render those 2 ponents in my Vue entry point?

I'm just starting with Vue and I have defined 2 ponents, however, I cannot render them in the same 'Vue' instance.

Here are my 2 ponents:

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

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

Next, I do have the 'Vue' entry point defined:

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

And in my HTML, I do have the following code:

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

The 'Vue' development tools does only show the 'button-counter' ponent:

If I remove the 'button-counter', the 'mat-example' is showed up in the Vue Developer Tools.

How does it e that I cannot render those 2 ponents in my Vue entry point?

• javascript
• vue.js
• vuejs2

Share Improve this question Follow asked Apr 14, 2018 at 7:55 ComplexityComplexity 5,83066 gold badges4646 silver badges9090 bronze badges 1

• What is the root ponent for Vue? – fitzberg Commented Aug 11, 2022 at 16:31

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 8

this is going to work:

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

demo:

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

  Vue.ponent('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/npm/[email protected]/dist/vue.js"></script>
    <div id="app">
        <button-counter></button-counter>
        <mat-example></mat-example>
    </div>

Use this tag instead of using self closing tag

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

本文标签： javascriptCannot render multiple components in VueStack Overflow