So rendern Sie Inhalte in den Slot

Question

Wie unten gezeigt, habe ich eine -Schaltfläche mit einem Slot in der untergeordneten Komponente erstellt. Der Name des Slots ist slotDigitizePolygonBtnLabel. Der button in der untergeordneten Komponente sollte eine Eigenschaft namens disabilityState haben, um anzugeben, ob der Button deaktiviert ist.

In der übergeordneten Komponente möchte ich den button rendern und den Wert von disabilityState übergeben.

Wenn ich den Code ausführe, wird nichts gerendert. Bitte sagen Sie mir, wo mein Fehler liegt und wie ich ihn beheben kann.

Unterkomponente: DigitizePolygonButton.vue

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

<script>
Standard exportieren {
    setup(props) {
        zurückkehren {
            digitalizePolygonBtnDisabilityState: props.isDigitizePolygonBtnDisabled,
        };
    },
    Requisiten: {
        isDigitizePolygonBtnDisabled: {
            Typ: Boolesch,
            erforderlich: wahr,
            Standard: falsch,
        },
    },
};
</script>

Übergeordnete Komponente:

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

Answer 1

你应该在你的代码中更改一些属性 你写的是 disabilityState 而不是 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>

在你的父组件中，你应该将 isDigitizePolygonBtnDisabled 属性传递给子组件，而不是 disabledState。 对父组件进行的更改：

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

进行这些更改应该可以正常工作。