Vue slot插槽 多层组件传递

以具名插槽为例

一、两层组件（父子组件）使用slot

子组件给插槽出口

child.vue

<div>
                    
 <slot name="empty"></slot>
                
</div>

父组件决定内容

father.vue

<child>

    <div slot='empty'>
        内容
    </div>

</child>

二、三层组件

爷爷组件给内容

grandfather.vue

<father>

    <div slot='empty'>
        内容
    </div>

</father>

父组件传递

father.vue

<child>

    <div slot='empty'>
        <slot name="empty"></slot>
    </div>

</child>

子组件给出插槽出口

child.vue

<child>

    <div>
         <slot name="empty"></slot>
    </div>

</child>