Vue.js verwenden Slot von Kinder Kinder

Question

So habe ich das folgende Beispiel:

Hier ist mein Kind Komponente. Alle anderen der folgenden Komponenten basieren darauf.

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

Dies ist eines der Kinder.

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

Diese Komponente wird direkt in meinem App.vue verwendet. Um <slot> s zu verwenden, ist der einzige Weg, den ich fand, dieser oben.

Meine Frage ist: Gibt es eine elegantere Methode, dies zu tun und div-Boxen nicht unnötig zu stapeln? Ich meine, ich kann es ohne named Slots tun. Ich denke, dass die rekursiv wie content -> slot(1st children) -> slot(2nd children) gezeigt werden kann, aber ich habe keine Ahnung, wie man es mit benannten Slots macht.

Vielen Dank im Voraus für jede Hilfe.

Answer 1

statt abhängig von Steckplatz für die Weitergabe Ihrer Inhalte, warum nicht stattdessen Requisiten verwenden?

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

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