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

Vue.js

Algo que, si bien no tendrás que hacer todos los días, puede salvarte la vida en algún caso

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):

HTML
<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>
HTML
<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:

HTML
<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.

Demo

Juan Andrés Núñez
Juan Andrés Núñez
Ingeniero Frontend Senior. Especialista en Vue.js. Speaker. Docente profesional. Estoico.