I am currently exploring Vue's setup API and there is one aspect that I am struggling with: I need to retrieve properties of a child component from a parent component. Everything seems to be functioning correctly, but I am facing difficulties with the TypeScript definition. I keep encountering a TS error stating that the property does not exist. From a TypeScript standpoint, it appears to be accurate since the object I defined lacks the property. Nevertheless, I believe there must be a method to help TypeScript comprehend.
<template>
<child ref="child" />
</template>
<script lang="ts">
import Child from 'child.vue'
export default {
name: 'parent',
mounted() {
const child: Child = this.$refs.child;
console.log(child.myprop); // TS2339: Property 'myprop' does not exist on type...
}
}
</script>
<script lang="ts">
import {defineComponent} from 'vue';
export default defineComponent({
name: 'child',
setup(props, context) {
const myprop = 1;
context.expose({myprop});
return {myprop};
}
})
</script