콘텐츠를 슬롯에 렌더링하는 방법
<p>아래와 같이 하위 구성 요소에 슬롯이 있는 <code>버튼</code>을 만들었습니다. 슬롯의 이름은 <code>slotDigitizePolygonBtnLabel</code>입니다. 하위 구성 요소의 <code>button</code>에는 버튼이 비활성화되었는지 여부를 나타내는 <code>disabilityState</code>라는 속성이 있어야 합니다. </p>
<p>상위 구성 요소에서 하위 구성 요소의 <code>button</code>을 렌더링하고 상위 구성 요소의 <disabilityState</code> 값을 하위 구성 요소에 전달하려고 합니다. </p>
<p>코드를 실행해도 아무것도 렌더링되지 않습니다. 오류가 발생한 위치와 해결 방법을 알려주십시오. </p>
<p><strong>하위 구성요소: DigitizePolygonButton.vue</strong></p>
<pre class="brush:php;toolbar:false;"><템플릿>
<button id="idDigitizePolygonBtn" class="clsDigitizePolygonBtn" :disabilityState="isDigitizePolygonBtnDisabled">
<슬롯 이름="slotDigitizePolygonBtnLabel">텍스트</slot>
</버튼>
</템플릿>
<스크립트>
기본값 내보내기 {
설정(소품) {
반품 {
digitizePolygonBtnDisabilityState: props.isDigitizePolygonBtnDisabled,
};
},
소품: {
isDigitizePolygonBtnDisabled: {
유형: 부울,
필수: 사실,
기본값: 거짓,
},
},
};
<p><strong>상위 구성요소</strong>:</p>
<pre class="brush:php;toolbar:false;"><template v-slot:slotDigitizePolygonBtnLabel>
<DigitizePolygonButton :disabilityState="false"> 테스트 </DigitizePolygonButton>
</템플릿></pre>
