Vue - Componentes

Los componentes nos permiten reutilizar código creando nuestros propios elementos HTML con su propia lógica.

Para que el componente pueda tener acceso a las variables de la instancia es necesario que data sea una función que regresa las variables y/o lógica necesaria para el componente

<div id="app">
  <p>Ambos componentes estan en la misma instancia</p>
  <p class="comentario">Primer componente</p>
  <contador></contador>

  <p class="comentario">Segundo componente</p>
  <otro-contador></otro-contador>
</div>

Vue.component('contador', {
  template: '<button v-on:click="numero += 1">Clicks: {{ numero }}</button>',
  data: function() {
    return {
      numero: 0
    }
  }
});

Vue.component('otro-contador', {
  template: '<button v-on:click="numero += 5">Suma 5: {{ numero }}</button>',
  data: function() {
    return {
      numero: 5
    }
  }
});

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

Resultado: