0

Quisiera ejecutar una función de mi componente padre desde el componente hijo, de forma dinámica. Cuento con una variable donde tengo el nombre de la función que deseo ejecutar.

He tratado de la siguiente forma pero no lo consigo.

<script src="https://unpkg.com/vue"></script>

<template id="child-template">
    <span @click="someMethod">Click me!</span>
</template>

<div id="app">
  <child></child>
</div>

<script>
Vue.component('child', {
  template: '#child-template',
  data: function () {
      return {
        modulo: 'msj1',
      }
  },
  methods: {
    someMethod(){
        this.$parent.(this.modulo);
    }
    }
});

var app = new Vue({
    el: '#app',
  methods: {
    msj1(){
        alert('mensaje 1');
    },
    msj2(){
        alert('mensaje 2');
    },
    }
});
</script>

1 respuesta 1

3

Solo debes ajustar la llamada a la funcion (usando [] para acceder al metodo por nombre y () para efectuar la llamada):

this.$parent[this.modulo]();

<script src="https://unpkg.com/vue"></script>

<template id="child-template">
    <span @click="someMethod">Click me!</span>
</template>

<div id="app">
  <child></child>
</div>

<script>
Vue.component('child', {
  template: '#child-template',
  data: function () {
      return {
        modulo: 'msj1',
      }
  },
  methods: {
    someMethod(){
        this.$parent[this.modulo]();
    }
    }
});

var app = new Vue({
    el: '#app',
  methods: {
    msj1(){
        alert('mensaje 1');
    },
    msj2(){
        alert('mensaje 2');
    },
    }
});
</script>

https://v2.vuejs.org/v2/guide/components-edge-cases.html#Accessing-the-Parent-Component-Instance

0

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

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