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> 

これは子供の1人です。

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

このコンポーネントは、私のApp.vueで直接使用されています。 <slot>を使うには、私が見つけた唯一の方法は上記のものです。

私の質問は：これを行うもっとエレガントな方法があり、div-Boxesは不要ですか？私は、名前の付いたスロットではできないことを意味します。私は<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>