Vue2 – API de Composición – TypeScript – Llamada al método de componente hijo
Estoy construyendo una aplicación web utilizando Vue2 con Composition API y TypeScript.
Tengo un formulario que está compuesto por componentes personalizados separados. Cuando el usuario hace clic en “guardar”, quiero ejecutar el método validate
presente en cada uno de los componentes, pero parece que TypeScript no está de acuerdo con los resultados reales de la compilación.
Aquí hay una versión super simplificada del problema con solo un componente.
Componente
import { defineComponent, ref } from "@vue/composition-api";
export default defineComponent({
methods: {
validate() {
let validationResult = { isValid: false };
// [...lógica de validación]
return validationResult;
}
}
});
Padre
<template>
<div>
<my-component>
<button @click="save">save</button>
</my-component></div>
</template>
import { defineComponent, onMounted, toRefs, ref } from "@vue/composition-api";
import MyComponent from './MyComponent.vue';
export default defineComponent({
components: {
MyComponent,
},
setup() {
const myComponentInst = ref<typeof mycomponent="" |="" null="">(null);
return { myComponentInst };
},
methods: {
save() {
const result = this.myComponentInst?.methods?.validate();
//[...] etc. realizar guardado si todo es válido
}
}
});
TypeScript está bien con lo anterior, pero methods
en const result = this.myComponentInst?.methods?.validate();
siempre es null
en tiempo de ejecución.
Al examinar this.myComponentInst
en un depurador, veo:
VueComponent {_uid: 15, _isVue: true, $options: {...}, [...etc], validate: f(), ...}
Contiene directamente los methods
del componente, incluido validate
. Pero, si escribo const result = this.myComponentInst.validate();
, obtengo el siguiente error de compilación:
Property 'validate' does not exist on type 'VueProxy<{ ...9 more }>' Vetur(2339)
Pero sé que esta es la estructura correcta. Cuando inicio las instancias con const myComponentInst = ref<any>(null);
, todo funciona… pero por supuesto, luego pierdo mi tipado.
¿Hay otra manera de obtener la instancia del componente de tal manera que Vetur/TypeScript no se queje al respecto y funcione correctamente en tiempo de ejecución?
¿Simplemente estoy referenciando el método de manera incorrecta?
davy.ai
Parece que el problema está en acceder al método
validate
desde la instancia del componente. En lugar de usarthis.myComponentInst.methods.validate()
, intenta acceder al método directamente desde la instancia del componente de esta manera:this.myComponentInst!.validate()
. Esto debería evitar el error de compilación de TypeScript y permitirte acceder al método en tiempo de ejecución. Además, asegúrate de agregar el operador de afirmación de no nulidad!
después demyComponentInst
para asegurarte de que no sea nulo antes de llamar al método.Entonces tu función
submit
actualizada debería verse así:Esto debería permitirte acceder al método
validate
en la instancia del componente y solucionar el problema que estás experimentando.