插槽全家桶

插槽就是子组件中的提供给父组件使用的一个占位符，用<slot></slot> 表示，父组件可以在这个占位符中填充任何模板代码，如 HTML、组件等，填充的内容会替换子组件的<slot></slot>标签。

匿名插槽

<template>
    <main class="main">
        <div>
            <!-- 匿名插槽 -->
            <slot></slot>
        </div>
    </main>
</template>

父组件将内容插入子组件插槽代码：

<template>
    <Dialog>
        <!-- 可以将'v-slot:'简写为# -->
        <template v-slot>
            <div>
                中间格子文字
            </div>
        </template>
    </Dialog>
</template>
<script setup lang='ts'>
import Dialog from '../插槽slot/index.vue'
</script>

具名插槽

<template>
    <header class="header">
        <!-- 具名插槽 -->
        <slot name="header"></slot>
    </header>
</template>

父组件将内容插入子组件插槽代码：

<template>
    <Dialog>
         <!-- 可以将'v-slot:'简写为'#'，也可以将其设置为默认插槽'#default' -->
        <template v-slot:header>
            <div>
                上面格子文字
            </div>
        </template>
    </Dialog>
</template>

<script setup lang='ts'>
import Dialog from '../插槽slot/index.vue'
</script>

作用域插槽

<template>
    <main class="main">
        <div v-for="item in data">
            <slot :data="item"></slot>
        </div>
    </main>
</template>
<script setup lang='ts'>
import { reactive, ref } from 'vue'
type names={
    name:string,
    age:number
}

const data=reactive<names[]>([
    {
        name:'Rarrot1',
        age:18
    },
    {
        name:'Rarrot2',
        age:19
    },
    {
        name:'Rarrot3',
        age:20
    },
    {
        name:'Rarrot4',
        age:21
    },
])
</script>

父组件将内容插入子组件插槽代码：

<template>
    <Dialog>
         <!-- 可以将'v-slot:'简写为'#'，也可以将其设置为默认插槽'#default' -->
        <template v-slot="{ data }">
            <div>
                {{ data.name + data.age + '，' }}
            </div>
        </template>
    </Dialog>
</template>

<script setup lang='ts'>
import Dialog from '../插槽slot/index.vue'
</script>

注意

匿名插槽和作用域插槽不能一起使用

动态插槽

<template>
    <footer class="footer">
        <slot name="footer"></slot>
    </footer>
</template>

父组件将内容插入子组件插槽代码：

<template>
    <Dialog>
        <template v-slot:[name]>
            <div>
                下面格子文字
            </div>
        </template>
    </Dialog>
</template>

<script setup lang='ts'>
import Dialog from '../插槽slot/index.vue'

// 可以修改footer，使其动态的在指定插槽插入内容
let name = ref('footer')
</script>