Comment restituer le contenu dans le slot

Question

Comme indiqué ci-dessous, j'ai créé un bouton Le nom de l'emplacement est slotDigitizePolygonBtnLabel. Le button dans le composant enfant doit avoir une propriété appelée disabilityState pour indiquer si le bouton est désactivé.

Dans le composant parent, je souhaite afficher le bouton du composant enfant et transmettre la valeur de disabilityState

Lorsque j'exécute le code, rien n'est rendu. S'il vous plaît dites-moi où se trouve mon erreur et comment la corriger.

Sous-composant : DigitizePolygonButton.vue

<template>
<id du bouton="idDigitizePolygonBtn" class="clsDigitizePolygonBtn" :disabilityState="isDigitizePolygonBtnDisabled">
    <slot name="slotDigitizePolygonBtnLabel">text</slot>
</bouton>
</modèle>

<script>
exporter par défaut {
    configuration (accessoires) {
        retour {
            digitizePolygonBtnDisabilityState : props.isDigitizePolygonBtnDisabled,
        } ;
    },
    accessoires : {
        isDigitizePolygonBtnDisabled : {
            tapez: booléen,
            requis : vrai,
            par défaut : faux,
        },
    },
} ;
</script>

Composant parent :

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

Answer 1

Vous devez modifier certaines propriétés dans votre code Vous avez écrit DisabilityState au lieu de 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>

Dans votre composant parent, vous devez transmettre la propriété isDigitizePolygonBtnDisabled au composant enfant au lieu de désactivéState. Modifications apportées au composant parent :

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

Apporter ces modifications devrait fonctionner correctement.