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

1
2
3
4
5
6
7
8
<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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
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: