插槽

   <!-- 插槽 -->
    <!-- 子组件 -->
    <div class="sloo">
        <slot></slot>
    </div>

    <!-- 父组件 -->
    <parent-slot>balblblbl</parent-slot>
    <!-- balblblbl会被插入到子组件sloo里面 -->

作用域插槽

    <!-- 子组件 -->
    <slot :user="user">
        {{user.name}}
    </slot>

    <!-- 父组件 使用子组件的数据-->
    <parent-slot>
        <template v-slot:default="{user}">
            {{user.age}}
        </template>
        <!-- 两种写法 -->
        <template v-slot:default="slotProps">
            {{slotProps.user.age}}
        </template>
    </parent-slot>
    

具名插槽

 <!-- 具名插槽 -->
    <!-- 子组件 -->
    <slot name="title"></slot>
    <!-- 子组件没有名字就是默认插槽 -->
    <!-- 父组件 -->
    <template v-slot:title>这是title</template>