How to pass properties of a slot from child to parent

Question

as shown in the code posted below, in the child-component i created a button with a slot. the slot has name slotDigitizePolygonBtnLabel and property named text. in the parent-component i am trying to get the properties of the slot as follows:

<DigitizePolygonButton v-slot="slotProps" :isDigitizePolygonBtnDisabled="false">

but the code posted below causes the following error, and it is not clear to me understanding the error and i would like to know how to fix it:

error:

 Failed to compile with 1 error                                                                                                                     08:38:15

 error  in ./src/components/NEWSWM/Map.vue?vue&type=template&id=3447e626&scoped=true

Syntax Error: Error: Codegen node is missing for element/if/for node. Apply appropriate transforms first.

child-component

<template>
    <button id="idDigitizePolygonBtn" class="clsDigitizePolygonBtn" :disabled="isDigitizePolygonBtnDisabled">
        <slot name="slotDigitizePolygonBtnLabel" :text="hi"></slot>
    </button>
</template>

<script>
export default {
    date() {
        return {
            digitizePolygonBtnDisabilityState: this.isDigitizePolygonBtnDisabled,
        };
    },
    props: {
        isDigitizePolygonBtnDisabled: {
            type: Boolean,
            required: true,
            default: false,
        },
    },
};
</script>

parent-component:

 <DigitizePolygonButton v-slot="slotProps" :isDigitizePolygonBtnDisabled="false">
    <template v-slot:slotDigitizePolygonBtnLabel> {{slotProps.text}} </template>
</DigitizePolygonButton>

Answer 1

You should compose your template like this:

<DigitizePolygonButton>
    <template v-slot:slotDigitizePolygonBtnLabel="slotProps"> {{slotProps.text}} </template>
</DigitizePolygonButton>

The default value for isDigitizePolygonBtnDisabled is false - therefore you should not declare it as required so you could simply omit it in the parent.
If you need it to be required - then obviously there is no need for a default value as it will be always ignored by Vue.