슬롯 내용이 null 또는 비어 있는지 확인

Question

약간의 로딩 구성 요소가 있습니다.이 구성 요소의 기본 텍스트는 '로드 중 ...'입니다. 슬롯에 대한 좋은 후보, 그래서 난 내 템플릿으로 이런 일이 : 나, 예를 들어와 로딩 메시지를 변경할 수 있습니다

<p class="loading"><i class="fa fa-spinner fa-spin"></i><slot>Loading...</slot></p>

<loading>Searching...</loading>. 하지만 슬롯 내용이 제공되지 않는 경우 기본 메시지를 표시하는 것뿐만 아니라 슬롯 내용이 null 또는 비어있는 경우에도 내가 원하는 동작이 있습니다. 현재 내가 할 경우 예 : <loading>{{loadingMessage}}</loading>이고 loadingMessage가 null이면 텍스트가 표시되지 않습니다 (기본 텍스트를 표시 할 위치). 따라서 이상적으로는 this.$slots.default을 테스트해야합니다. 이것은 내용이 전달되었는지 여부를 알려주지 만 비어 있는지 여부를 어떻게 찾습니까? this.$slots.default.text은 정의되지 않은 값을 반환합니다.

Answer 1

this.$slots을 확인하는 계산 된 속성이 필요합니다. 기본 슬롯의 경우 this.$slots.default을 확인하고 이름이 지정된 슬롯으로 default을 슬롯 이름으로 바꿉니다.

computed: { 
    slotPassed() { 
    return !!this.$slots.default[0].text.length 
    } 
} 

그리고는 템플릿에서 사용 :

<template> 
    <div> 
    <slot v-if="slotPassed">Loading...</slot> 
    <p v-else>Searching...</p> 
    </div> 
</template> 

당신은 작은 예를 here을 볼 수 있습니다. 대체 콘텐츠가 표시되는 방식과 슬롯 내부에있는 '기본 콘텐츠'가 아닙니다.

: 내 말씨가 더 좋았을 수 있습니다. 당신은 무엇을 할 필요가 $slots.X 값을 확인하지만 계산 된 속성은 방법은 확인하는 것입니다. 템플릿에 슬롯 체크를 쓸 수도 있습니다.

<template> 
    <div> 
    <slot v-if="!!$slots.default[0].text">Loading...</slot> 
    <p v-else>Searching...</p> 
    </div> 
</template>