vue slot插槽

1. 匿名插槽

<!-- parent -->
<Children>
    <h4>标题内容</h4>
    <!-- 匿名插槽默认用default做参数，v-slot仅能用于template标签 -->
    <template v-slot:default>
        <h4>标题内容</h4>
    </template>
</Children>

<!-- children -->
<div>
    <slot></slot>
    <div>这是一段内容</div>
</div>

2. 具名插槽

<!-- parent -->
<Children>
    <template v-slot:default>
        <h4>标题内容</h4>
    </template>
    <template v-slot:foot>
        <h4>页脚内容</h4>
    </template>
</Children>

<!-- children -->
<div>
    <slot></slot>
    <div>这是一段内容</div>
    <slot name="foot"></slot>
</div>

3. 作用域插槽

<!-- parent -->
<Children>
    <template v-slot:title="slotProps">
        <h4>这是{{slotProps.baby}}的地盘</h4>
    </template>
</Children>

<!-- children -->
<div>
    <slot name="title" baby="小牛"></slot>
</div>