Vue3—插槽solt

默认插槽

父组件

        <Sidebar>
            <div>
                {{ strData }}
            </div>
        </Sidebar>
let strData = ref('我是你爸爸真伟大，养你这么大');//定义插槽数据

子组件

 <slot>没有数据，我先默认显示一下 loading。。。。。。。</slot>

父组件提供的内容会覆盖子组件的默认内容。
若父组件未提供具名插槽内容，子组件的默认内容将被渲染。

具名插槽

子组件

        <slot name="title"></slot>
        <slot name="strslot">没有数据，我先默认显示一下 loading。。。。。。。</slot>
        //给插槽取两个名字 title strslot

父组件

        <Sidebar>
            <template v-slot:title>
                <span>{{title}}</span>
            </template>
            <template v-slot:strsolt>
                <div>
                    {{ strData }}
                </div>
            </template>
        </Sidebar>
        //简写
        <Sidebar>
            <template #title>
                <span>{{title}}</span>
            </template>
            <template #strslot>
                <div>
                    {{ strData }}
                </div>
            </template>
        </Sidebar>
let strData = ref('我是你爸爸真伟大，养你这么大');//定义插槽数据
let title = ref('我是slot的标题');

简写：
#header 等价于 v-slot:header。# 缩写只能在 标签上使用，若直接在组件上使用 v-slot，则不能使用缩写。
通过 name 属性指定插槽名称。
将子组件已经取好的插槽名在父组件
使组件结构更灵活，适用于多种场景。
语法：
子组件用 定义，父组件用 <template #xxx> 使用。
作用：
允许父组件将内容精确分发到子组件的不同位置。
适用场景：
布局组件、模态框、表格等需要灵活内容结构的组件。

通过具名插槽，组件可以更灵活地复用，同时保持清晰的结构和数据流向。

作用域插槽

子组件

        <slot name="title"></slot>
        <slot name="strslot" :childData="sendData">没有数据，我先默认显示一下 loading。。。。。。。</slot>
        //script
let sendData = ref('这是儿子给父亲最后的一点温柔了');

父组件

        <Sidebar>
            <template #title>
                <div>
                    {{ title }}
                </div>
            </template>
            <template #strslot="{ childData }">
                <div>
                    {{ strData }}
                </div>
                <span>
                    {{ childData }}
                </span>
            </template>
        </Sidebar>

作用：
允许子组件向父组件传递数据，使父组件能够动态自定义子组件的渲染内容。
突破数据单向流动限制：子组件可向父组件回传数据，父组件基于这些数据自定义渲染逻辑。
增强组件复用性：子组件提供 “渲染接口”，父组件通过插槽自定义具体实现。
数据来源：
子组件向父组件传递动态数据
灵活性：
高（内容可根据子组件数据变化）
语法：
传递数据

<!-- 完整语法 -->
<template v-slot:item="{ item }">...</template>

<!-- 缩写语法 -->
<template #item="{ item }">...</template>

适用场景：
列表 / 表格组件、通用布局组件、需要动态内容的组件。
默认插槽对比：
普通插槽内容由父组件静态定义，作用域插槽内容动态依赖子组件数据。