Cómo llamar un método de un componente hijo

Inicial Vue Curso Vue en Escuela Vue

Aunque la manera estándar de comunicar componentes en Vue es a través de propiedades (de padre a hijo) y eventos (de hijo a padre), en ocasiones necesitarás ejecutar un método de un componente hijo.

Pues bien, es tan sencillo como darle una referencia de plantilla al componente al que quieres acceder y llamar al método.

Con Vue 3 Composition API y script setup

A través de script setup, donde deberemos de exponer el método para que pueda ser consumido desde fuera (los componentes creados con script setup están cerrados por defecto):

<script setup>
// Parent component
import { ref, onMounted } from 'vue';

import HelloWorld from './components/HelloWorld.vue';

const helloRef = ref(null);

onMounted(() => {
	// Components are ready
  helloRef.value.sayHello();
});
</script>

<template>
  <HelloWorld ref="helloRef" />
</template>
<script setup>
// Child component
const sayHello = () => alert('Hello world! 🔥');

defineExpose({ sayHello });
</script>

Con la Options API

Por supuesto, también podemos hacer lo mismo con la Options API a la que todos/as estamos tan acostumbrados:

<script>
export default {
	mounted() {
		this.$refs.helloRef.sayHello()
	}
}
</script>

Aunque acceder al estado y lógica de otros componentes de esta forma es completamente válido, si te encuentras en esta situación muchas veces quizás debas replantearte la arquitectura de tu proyecto y usar una librería como Pinia y extraer el estado a composables.

Aquí tienes todo el código de este DevTip.

Código asociado
Curso Vue en Escuela Vue

¿Tienes alguna pregunta sobre Cómo llamar un método de un componente hijo?

Resuelve todas tus dudas sobre Vue en la Comunidad de Escuela Vue: un lugar donde participar, aprender y ayudar. ¡Te esperamos!.

Tras el registro (si no lo has hecho ya) serás redirigido/a al canal adecuado en la Comunidad.

Twitter

Sigue el día a día y todo lo relacionado con Escuela Vue a través de su cuenta de Twitter.

Discord

En la Comunidad de Escuela Vue podrás solucionar tus dudas y ayudar a otras personas como tú a solucionar las suyas.

Recibe novedades en tu 📬