如何將內容渲染到插槽中

Question

如下所示，我在子元件中建立了一個有插槽的button。插槽的名稱是slotDigitizePolygonBtnLabel。子元件中的button應該有一個名為disabilityState的屬性來表示按鈕是否被停用。

在父元件中，我想要渲染子元件的button並將disabilityState的值從父元件傳遞給子元件。

當我運行程式碼時，沒有任何內容被渲染。請告訴我我的錯誤在哪裡以及如何修復它。

子元件：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>

父親組件:

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

進行這些更改應該可以正常工作。