1

Tengo el siguiente ejercicio donde declaro una nueva instancia de VueJS

let app = new Vue({
  el: `#app`,
  data: {
    contador: 0
  },
  methods: {
    aumenta() {
      this.contador++
    }
  },
  created() {
    this.aumenta()
  }
})

Antes de esta instancia, hago un componente global en el cual paso por medio de props tanto a contador como al método aumenta de tal suerte que deseo que el botón contenido en dicho componente tenga la lógica de aumentar en 1 dicho valor por medio del método en cuestión

Vue.component('precio-esquina', {
  props: ['contador', 'aumenta'],
  template: `
              <div>
                <button @click="aumenta()">+</button>
                Llevas {{ contador }}
              </div>
            `
})

Finalmente invoco dicho componente dentro del alcance del div de este modo:

  <div id="app">
    <precio-esquina></precio-esquina>
  </div>

Pero obtengo el siguiente error:

vue:6 ReferenceError: aumenta is not defined

Entonces la pregunta:

¿Cómo paso un método declarado en la instancia de VueJS a un componente global?

1
  • tu método aumenta() debe ir en el componente y desde ahí emitir el evento al padre Commented el 30 jul. 2019 a las 1:27

1 respuesta 1

1

Dale click a ejecutar.

Lo ideal sería hacer un bus y jugar con los emit

Vue.component('precio-esquina', {
  props: ['contador'],
  template: `
              <div>
                <button @click="aumenta()">+</button>
                Llevas {{ contador }}
              </div>
            `,  
           
  methods: {
    aumenta() {
     this.$parent.aumenta();
     console.log("Accediendo desde componente hijo: ");
     console.log(this.$parent.contadorPadre);     
    }
  },
})


let app = new Vue({
  el: `#app`,
data: {
    contadorPadre: 0  
},
  methods: {
    aumenta() {    
      this.contadorPadre++;      
    }    
  },
  created() {
    this.aumenta();
  }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
  <div id="app">
    <precio-esquina :contador="contadorPadre" ></precio-esquina>
  </div>

Referencias

  1. https://v2.vuejs.org/v2/guide/components.html#Reusing-Components
  2. https://v2.vuejs.org/v2/guide/components.html#Passing-Data-to-Child-Components-with-Props
1
  • Te acepto la respuesta ya conseguí con tu ayuda lo que ocupaba gracias
    – user128299
    Commented el 30 jul. 2019 a las 2:18

Tu Respuesta

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