Bagaimana untuk menjadikan kandungan ke dalam slot

Question

Seperti yang ditunjukkan di bawah, saya telah mencipta butang Nama slot ialah slotDigitizePolygonBtnLabel. Butang dalam komponen kanak-kanak harus mempunyai sifat yang dipanggil disabilityState

Dalam komponen induk, saya ingin memaparkan butang komponen anak dan menghantar nilai disabilityState

Apabila saya menjalankan kod, tiada apa-apa yang dipaparkan. Tolong beritahu saya di mana ralat saya dan cara membetulkannya.

Subkomponen: DigitizePolygonButton.vue

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

<skrip>
eksport lalai {
    persediaan(props) {
        kembali {
            digitizePolygonBtnDisabilityState: props.isDigitizePolygonBtnDisabled,
        };
    },
    alat peraga: {
        isDigitizePolygonBtnDisabled: {
            jenis: Boolean,
            dikehendaki: benar,
            lalai: palsu,
        },
    },
};
</script>

Komponen induk:

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

Answer 1

Anda harus menukar beberapa sifat dalam kod anda Anda menulis disabilityState dan bukannya 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>

Dalam komponen induk anda, anda harus menyerahkan harta isDigitizePolygonBtnDisabled kepada komponen anak dan bukannya disabledState. Perubahan yang dibuat kepada komponen induk:

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

Membuat perubahan ini sepatutnya berfungsi dengan baik.