如何将内容渲染到插槽中

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>

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