如何将内容渲染到插槽中
P粉877114798
2023-08-18 00:30:15
<p>如下所示，我在子组件中创建了一个带有插槽的<code>button</code>。插槽的名称是<code>slotDigitizePolygonBtnLabel</code>。子组件中的<code>button</code>应该有一个名为<code>disabilityState</code>的属性来表示按钮是否被禁用。</p>
<p>在父组件中，我想要渲染子组件的<code>button</code>并将<code>disabilityState</code>的值从父组件传递给子组件。</p>
<p>当我运行代码时，没有任何内容被渲染。请告诉我我的错误在哪里以及如何修复它。</p>
<p><strong>子组件：DigitizePolygonButton.vue</strong></p>
<pre class="brush:php;toolbar:false;"><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></pre>
<p><strong>父组件</strong>:</p>
<pre class="brush:php;toolbar:false;"><template v-slot:slotDigitizePolygonBtnLabel>
<DigitizePolygonButton :disabilityState="false"> test </DigitizePolygonButton>
</template></pre>
你应该在你的代码中更改一些属性 你写的是 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>进行这些更改应该可以正常工作。