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