0

Tengo este trozo de código:

    <div id="counter-event-example">
    <p>{{ total }}</p>
    <button-counter v-on:increment="incrementTotal"></button-counter>
    <button-counter v-on:increment="incrementTotal"></button-counter>
    </div>

    Vue.component('button-counter', {
     template: '<button v-on:click="increment">{{ counter }}</button>',
     data: function () {
        return {
         counter: 0
        }
       },
      methods: {
       increment: function () {
       this.counter += 1
       this.$emit('increment')
        }
       },
      })

    new Vue({
    el: '#counter-event-example',
    data: {
     total: 0
    },
   methods: {
    incrementTotal: function () {
    this.total += 1
   }
  }
  })

¿Cómo se renderiza este trozo del código: <button-counter v-on:increment="incrementTotal"></button-counter?. ¿Será que increment se ejecuta primero que ìncrementTotal?.

Gracias por leer.

2
  • Hola Erick,bienvenido al sitio. a que te refieres exactamente con tu pregunta. (Cómo se renderiza el código?) es claro que primero se ejecuta el evento click por lo tanto , primero será increment
    – Dev. Joel
    Commented el 23 sept. 2018 a las 23:16
  • @Dev.Joel gracias por tu respuesta. Realmente no me refería a cómo se renderiza, me refería al porqué y de qué manera se ejecuta el orden de los métodos en este trozo de código: <button-counter v-on:increment="incrementTotal"></button-counter>.
    – eriicx0
    Commented el 24 sept. 2018 a las 16:31

1 respuesta 1

0

El componente padre es counter-event-example éste tiene como hijo a button-counter.

Pasarle datos del padre al hijo es trivial (usando props) pero pasarlos del hijo al padre no es tan trivial, y una de las soluciones es usar la emisión de eventos.

Cuando el componente hijo recibe un click, ejecuta el metodo increment

<button v-on:click="increment">{{ counter }}</button>

A su vez, el método increment emite el evento increment.

increment: function () {
  this.counter += 1
  this.$emit('increment')
}

Pasa que como se llaman igual, uno tiende a confundirse.

Ahora, cuando un componente hijo emite un evento ¿Quién lo recibe? El padre no lo recibe mágicamente, sino que explícitamente declara que cuando el hijo emita el evento increment, se ejecute en el padre el método incrementTotal

<button-counter v-on:increment="incrementTotal"></button-counter>

Entonces la cadena es:

- ButtonCounter.click <Evento>
  - ButtonCounter.increment <Método>
    - ButtonCounter.emit('increment' <Evento>)
      - CounterEventExample.incrementTotal <Método>
2
  • ¡Excelente amigo!. Ya entendí que es necesario this.$emit('increment') para que el padre sepa que se emitió el evento ìncrement, y así proceda a ejecutar a incrementTotal... Pero tengo una "espinita": ¿la sintaxis para que ocurra todo eso es necesario que sea así: v-on:increment="incrementTotal" ?
    – eriicx0
    Commented el 24 sept. 2018 a las 16:22
  • Claro, el v-on declara un listener sobre el hijo. Puedes probar metiendo más button-counter sin declarar el v-on y verás que aunque esos emiten, el padre no los escucha
    – ffflabs
    Commented el 24 sept. 2018 a las 20:20

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.