I am migrating project from Vue 2 to Vue 3 and can’t find a solution to a problem
Form.vue
<template>
<form>
<slot></slot>
</form>
</template>
<script lang="ts">
import { Component, Setup, Vue } from 'vue-facing-decorator'
import { useSlots } from 'vue'
@Component({
name: 'Form'
})
export default class Form extends Vue
{
@Setup(() => useSlots())
private slots!:any;
public mounted():void
{
}
public submit():void
{
for(let i in this.slots!.default!())
{
let child:any = this.slots!.default!()[i];
if('FormSubmit' === child.type.name)
{
child.lock();
}
}
}
}
</script>
FormSubmit.vue
<template>
</template>
<script lang="ts">
import { Component, Prop, Setup, Vue, Watch } from 'vue-facing-decorator'
@Component({
name: 'FormSubmit',
expose: ['lock']
})
export default class FormSubmit extends Vue
{
public lock():void
{
console.log('lock the button');
}
}
</script>
And the main view:
<template>
<main>
<Form>
<FormSubmit />
</Form>
</main>
</template>
<script lang="ts">
import {Vue, Component } from 'vue-facing-decorator';
@Component
export default class FormView extends Vue
{
}
</script>
In Vue 2 I could loop through this.$children and access any child method but here it says that
child.lock is not a function
How can I then get the child from a slot and call that child’s method?
Unfortunatelly ChatGPT is not helping this time, asking me to change submit() function into this
public submit():void
{
const defaultSlot = this.slots!.default?.();
if (!defaultSlot) return;
defaultSlot.forEach((vnode: any) => {
if (vnode.type.name === 'FormSubmit') {
const componentInstance = vnode.component;
console.log(componentInstance);
if (componentInstance && typeof componentInstance.exposed.lock === 'function') {
componentInstance.exposed.lock(); // Call the lock method
}
}
});
}
but componentIntance is always null