How to render content into slot

Question

As shown below, I have created a button with a slot in the child component. The name of the slot is slotDigitizePolygonBtnLabel. The button in the child component should have a property called disabilityState to indicate whether the button is disabled.

In the parent component, I want to render the child component's button and pass the value of disabilityState from the parent component to the child component.

When I run the code, nothing is rendered. Please tell me where is my error and how to fix it.

Subcomponent: DigitizePolygonButton.vue

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

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

Parent component:

<template v-slot:slotDigitizePolygonBtnLabel>
    <DigitizePolygonButton :disabilityState="false"> test </DigitizePolygonButton>
</template>

Answer 1

You should change some properties in your code You wrote disabilityState instead of disabledState

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

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

In your parent component, you should pass the isDigitizePolygonBtnDisabled property to the child component instead of disabledState. Changes made to parent component:

<template>
    <DigitizePolygonButton :isDigitizePolygonBtnDisabled="false">
        <template v-slot:slotDigitizePolygonBtnLabel>
            <button>测试按钮</button>
        </template>
    </DigitizePolygonButton>
</template>

Making these changes should work fine.