<p>Wie unten gezeigt, habe ich eine <code>-Schaltfläche</code> mit einem Slot in der untergeordneten Komponente erstellt. Der Name des Slots ist <code>slotDigitizePolygonBtnLabel</code>. Der <code>button</code> in der untergeordneten Komponente sollte eine Eigenschaft namens <code>disabilityState</code> haben, um anzugeben, ob der Button deaktiviert ist. </p> <p>In der übergeordneten Komponente möchte ich den <code>button</code> rendern und den Wert von <code>disabilityState</code> übergeben. </p> <p>Wenn ich den Code ausführe, wird nichts gerendert. Bitte sagen Sie mir, wo mein Fehler liegt und wie ich ihn beheben kann. </p> <p><strong>Unterkomponente: DigitizePolygonButton.vue</strong></p> <pre class="brush:php;toolbar:false;"><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></pre> <p><strong>Übergeordnete Komponente</strong>:</p> <pre class="brush:php;toolbar:false;"><template v-slot:slotDigitizePolygonBtnLabel> <DigitizePolygonButton :disabilityState="false"> test </DigitizePolygonButton> </template></pre>

<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>

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