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

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.