Vue.js 자녀의 슬롯을 사용하십시오

Question

다음 예제가 있습니다.

여기 내 자녀 구성 요소입니다. 다음 구성 요소 중 다른 구성 요소는 모두이 내용을 기반으로합니다.

<template> 
    <div class="content-box"> 
    <div class="boxtitlecontainer titleColor"> 
     <slot name="title">Title</slot> 
    </div> 
    <div class="insidebox boxColor"> 
     <slot></slot> 
    </div> 
    </div> 
</template> 

이것은 어린이 중 하나입니다.

<template> 
    <div class="example"> 
    <box> 
     <div slot="title"><slot name="title">Title</slot></div> 
     <slot></slot> 
    </box> 
    </div> 
</template> 

이 구성 요소는 내 App.vue에서 직접 사용됩니다. <slot>을 사용하려면 위의 방법을 찾은 것뿐입니다.

내 질문은 : 이 작업을 수행하고 div-Box가 불필요하게 쌓이지 않는 우아한 방법이 있습니까? 내 말은, 나는 이름없는 슬롯이 없어도 할 수 있다는 뜻입니다. 나는 <slot>가 content -> slot(1st children) -> slot(2nd children)처럼 반복적으로 보일 수 있다고 생각하지만 이름이 지정된 슬롯을 사용하는 방법에 대해서는 전혀 모른다.

미리 도움을 청하십시오.

Answer 1

대신 콘텐츠를 전달하는 슬롯에 따라 대신 소품을 사용하지 않으시겠습니까?

<template> 
    <div class="example"> 
    <box> 
     <div v-text="title">Title</div> 
     <slot></slot> 
    </box> 
    </div> 
</template> 

<script> 
export default { 
    props: ['title'] 
} 
</script>