Vue.js with TypeScript - getting the type of the ref child component

Question

My parent component has a child component called with reference passed to it:

<child
  ref="childRef"
/>

Now from the parent component I want to run the function which is inside child component like this:

mounted() {
  (this.$refs.childRef as any).testFunction();
}

Of course it's working fine with any type, but how do I set the correct type to run this function?

If I use the type of the component itself:

(this.$refs.childRef as Child).testFunction();

it still says that property testFunction does not exist on type 'Vue'.

I use the 2 version of Vue.js.

My child component:

@Component({})
export default class Child extends Mixins(CustomMixin) {
  testFunction() {
    console.log('test');
  }
}

EDIT: Also I found this solution to run the function:

(this.$refs.childRef as Child & { testFunction:() => void }).testFunction();

It updates the Child type with the method testFunction() and it actually works. Although I don't know if this is a good approach.

It wasn't originally shown how Child is defined. This is very specific to your case, which is vue-class-component and not just every component. Since Child in your case is a class, I'd expect this to work. The "solution" is a hack that fixes some problem with types, it's not a correct solution. You need to add details how the problem is observed, because TS errors at build time and in IDE are totally different things. Consider providing a way to reproduce it, e.g. at Stackblitz with some vue+ts template — Estus Flask
– Estus Flask, Commented Jul 22, 2022 at 14:00

Rohìt Jíndal · Accepted Answer · 2022-07-22 13:20:51Z

0

Your code looks fine and it should work as child component ref holds the instance of Child component only. Here is the code snippet. Please have a look and crosscheck with your code to find out the root cause.

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <child ref="childCom"></child>
</div>

Vue.component('child', {
    methods: {
    testFunction() {
        console.log('test function call')
    }
  }
});

var app = new Vue({
  el: '#app',
  mounted() {
    (this.$refs.childCom as Child).testFunction();
  }
});

Demo Link : https://jsfiddle.net/w6bjso78/

edited Jul 22, 2022 at 13:20

answered Jul 22, 2022 at 13:08

Rohìt Jíndal

27.4k16 gold badges80 silver badges133 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Estus Flask Over a year ago

Did you test it? Child is not a class, it cannot be used as a type for an instance. This is TS problem. The code without types is likely workable.

Rohìt Jíndal Over a year ago

@EstusFlask Sorry, SO code snippet not support typescript. Hence, I just added a jsfiddle link. Thanks for pointing that out.

The50 Over a year ago

Yeah I also updated my question with Child component and one possible solution. The child component is exported as a Vue type. I use Mixins but it's also the same with extends Vue too.

The50 · Accepted Answer · 2022-07-22 13:42:05Z

0

So far this is the solution I found:

(this.$refs.childRef as Child & { testFunction:() => void }).testFunction();

It works although I don't know if this is a clean apporach. It updates the Child type with a void method testFunction.

answered Jul 22, 2022 at 13:42

The50

1,1984 gold badges25 silver badges61 bronze badges

Comments

Lin · Accepted Answer · 2022-12-13 03:53:00Z

0

I solved this problem with this:

const MyComponent = ref<InstanceType<typeof MyFileBoard>>()

You can read more details there.

edited Dec 13, 2022 at 3:53

answered Dec 13, 2022 at 3:51

Lin

11 bronze badge

Comments

Carlos Sanchez Acero · Accepted Answer · 2023-12-06 17:51:02Z

0

I always using setup and lang="ts"

I think that the best method is:

// child-component.vue

export interface IEtapa {
  fetchEnviosContar(): Promise<void>
}

const fetchEnviosContar = async ():Promise<void>=>{
  console.log("hello world")
})
defineExpose<IEtapa>({
  fetchEnviosContar,
})

// parent-component.vue

import Etapas, { IEtapa } from '../components/etapas/index.vue'

const refEtapasComponent = ref<IEtapa | null>(null)

refEtapasComponent.value?.fetchEnviosContar()

answered Dec 6, 2023 at 17:51

Carlos Sanchez Acero

891 silver badge6 bronze badges

Collectives™ on Stack Overflow

Vue.js with TypeScript - getting the type of the ref child component

4 Answers 4

3 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related