如下所示，我在子组件中创建了一个带有插槽的button。插槽的名称是slotDigitizePolygonBtnLabel。子组件中的button应该有一个名为disabilityState的属性来表示按钮是否被禁用。
在父组件中，我想要渲染子组件的button并将disabilityState的值从父组件传递给子组件。
当我运行代码时，没有任何内容被渲染。请告诉我我的错误在哪里以及如何修复它。
子组件：DigitizePolygonButton.vue
1
1149<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> 
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
收藏
你应该在你的代码中更改一些属性 你写的是 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>进行这些更改应该可以正常工作。