After using Vue for some time, I decided to transition to implementing Typescript. However, I've encountered an issue where accessing the child's methods through the parent's refs is causing problems.
Parent Code:
<template>
<ref-test ref="child"/>
</template>
<script lang="ts">
import Vue from "vue";
import RefTest from "./RefTest.vue";
export default Vue.extend({
name: "RefParent",
components: {
RefTest
},
data: () => ({}),
methods: {},
mounted() {
const child = this.$refs.child as RefTest;
child.pingMe();
}
});
</script>
<style scoped></style>
Child Code:
<template>
<div>REF TEST...</div>
</template>
<script lang="ts">
import Vue from "vue";
export default Vue.extend({
name: "RefTest",
data: () => ({}),
methods: {
pingMe() {
console.log("refTest pingMe");
}
}
});
</script>
<style scoped></style>
The challenge I'm facing is that when referencing the child in the parent component with
const child = this.$refs.child as RefTest;'RefTest' refers to a value, but is being used as a type here.child.pingMe(); results in: Property 'pingMe' does not exist on type 'Vue'.I've attempted various solutions mentioned in discussions like this one: https://github.com/vuejs/vue/issues/8406, particularly focusing on interface definitions and the Vue.extend<> call.
Your assistance in clarifying the distinctions in utilizing Typescript would be greatly appreciated.