How to render content into slot
P粉877114798
2023-08-18 00:30:15
<p>As shown below, I have created a <code>button</code> with a slot in the child component. The name of the slot is <code>slotDigitizePolygonBtnLabel</code>. The <code>button</code> in the child component should have a property called <code>disabilityState</code> to indicate whether the button is disabled. </p>
<p>In the parent component, I want to render the child component's <code>button</code> and pass the value of <code>disabilityState</code> from the parent component to the child component. </p>
<p>When I run the code, nothing is rendered. Please tell me where is my error and how to fix it. </p>
<p><strong>Subcomponent: 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>Parent component</strong>:</p>
<pre class="brush:php;toolbar:false;"><template v-slot:slotDigitizePolygonBtnLabel>
<DigitizePolygonButton :disabilityState="false"> test </DigitizePolygonButton>
</template></pre>
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
You should change some properties in your code You wrote disabilityState instead of disabledState
In your parent component, you should pass the isDigitizePolygonBtnDisabled property to the child component instead of disabledState. Changes made to parent component:
Making these changes should work fine.