콘텐츠를 슬롯에 렌더링하는 방법

Question

아래와 같이 하위 구성 요소에 슬롯이 있는 버튼을 만들었습니다. 슬롯의 이름은 slotDigitizePolygonBtnLabel입니다. 하위 구성 요소의 button에는 버튼이 비활성화되었는지 여부를 나타내는 disabilityState라는 속성이 있어야 합니다.

상위 구성 요소에서 하위 구성 요소의 button을 렌더링하고 상위 구성 요소의 값을 하위 구성 요소에 전달하려고 합니다.

코드를 실행해도 아무것도 렌더링되지 않습니다. 오류가 발생한 위치와 해결 방법을 알려주십시오.

하위 구성요소: DigitizePolygonButton.vue

<템플릿>
<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>
</템플릿>

Answer 1

코드의 일부 속성을 변경해야 합니다. 장애인 상태 대신에 장애 상태를 작성하셨습니다

으아악

상위 구성 요소에서는 비활성화 상태 대신 isDigitizePolygonBtnDisabled 속성을 하위 구성 요소에 전달해야 합니다. 상위 구성 요소에 대한 변경 사항:

으아악

이렇게 변경하면 정상적으로 작동할 것입니다.