Veremos por qué no debemos de pasar funciones en los props en Vue y cuales otros mecanismos puedes emplear como el uso de eventos personalizados.

Vue.js es una de las grandes sorpresas que hemos tenido en los últimos años al tener un framework con el cual podemos construir aplicaciones interactivas y de tipo SPA sin necesidad de usar Vue en toda la página, ya que, podemos definir que queremos usar Vue en toda una página HTML o solo en un fragmento de la misma; es un framework rápido y fácil de iniciarse y de entender y lo que vamos a ver en este artículo consiste en aprender un mal uso del uso de los props cuyo propósito es el de pasar datos entre un componente padre a un componente hijo y estos datos tienen que ser primitivas como números, strings, objetos… y no funciones. strings, objetos… y no funciones.

 Las props permiten que los datos fluyan de manera unidireccional, lo que es esencial para mantener la modularidad y la reutilización de código.

Entonces, partamos del siguiente ejemplo, en donde tenemos un componente padre y un componente hijo al cual le pasamos una función:

<template>
 <ChildComponent :callback="toDo" />
</template>
<script>
 export default {
   name: 'ParentComponent',
   methods: {
     toDo() {
       //
     }
   }
 }
</script>

Esto es incorrecto por las siguientes razones:

El Problema con Pasar Funciones como Props

Aunque es posible pasar funciones como props en Vue.js, esto puede llevar a problemas de rendimiento y dificultades en el mantenimiento del código. por lo tanto, no deberíamos de emplearlos; damos algunas razones:

1. Referencias a Funciones: Cuando pasamos una función como prop, en realidad estamos pasando una referencia a esa función. Esto significa que si modificamos la función en el componente hijo, también afectará al componente padre y a cualquier otro componente que utilice la misma función. Esto puede generar efectos secundarios inesperados y dificultar el seguimiento de los cambios.
2. Dificultad en el Mantenimiento: Si tenemos múltiples componentes que utilizan la misma función como prop, cualquier cambio en la función requerirá modificaciones en todos los lugares donde se utiliza. Esto puede volverse complicado y difícil de mantener a medida que crece la aplicación.
3. Rendimiento: Pasar funciones como props puede afectar el rendimiento, especialmente si las funciones son complejas o se ejecutan con frecuencia. Cada vez que se pasa una función como prop, se crea una nueva instancia de esa función en el componente hijo. Esto puede generar una sobrecarga innecesaria.

<template>
  <a @click="execute">Execute action</a>
</template>

<script>
  export default {
    props: {
      callback: {
        type: Function
      }
    },

    methods: {
      execute() {
        // ... do something here

        if (this.callback) {
          this.callback()
        }
      }
    }
  }
</script>

Alternativas y Buenas Prácticas

En lugar de pasar funciones como props, podemos emplear eventos personalizados, o centralizar las funciones, por ejemplo, colocarlas en el app.vue o usar un gestor de estado como Pinia o VueX.

Aquí te mostramos el código en donde empleamos un evento personalizado llamado eventInChild y que puede tener cualquier nombre, en caso de que no los conozcas, lo único que debes hacer es definir el evento en el padre como un atributo en el hijo, en este ejemplo eventInChild:

# ParentComponent
<template>
  <ChildComponent @eventInChild="toDo" />
</template>

<script>
  export default {
    name: 'ParentComponent',

    methods: {
      toDo() {
        //
      }
    }
  }
</script>

Y desde el hijo, donde queramos, lo emitimos:

# ChildComponent
<script>
  export default {
    methods: {
      eats() {
        this.$emit('eventInChild')
      }
    }
  }
</script>