vue3插槽变化

1.默认插槽还是跟以前一样

2.使用具名插槽时，子组件不变

以前的父组件掉用的时候

    <template slot="example">
    </template>

现在为

    <template v-slot:example>
    </template>
    或者
    <template #example>
    </template>

3.作用域插槽

①父组件写法 v-slot=“{子组件插槽定义的值}”,多个值写法v-slot=“{ data,index }”,同时这里也可以简写
#default=“{ data,index }” 这样就可以了

<template>
    <div class="home_main">
        <Dialog>
            <template #header>
                <div>
                    我是头部的内容
                </div>
            </template>

            <template v-slot="{ data,index }">
                <div>
                    {{ data.name }}--{{ data.age }}--{{index}}
                </div>
            </template>
            <template #footer>
                <div>
                    我是底部内容
                </div>
            </template>
        </Dialog>
    </div>
</template>

<script lang="ts" setup>
import Dialog from "../../components/slotDialog/index.vue"

</script>

<style lang="scss">
.home_main {
    width: 100%;
    height: 100vh;
    background: green;
    font-size: 30px;
}
</style>

②子组件写法可以传多个值

<template>
    <div class="dialog_main">
        <header class="header">
            <slot name="header"></slot>
        </header>
        <main class="main">
            <div v-for="(item, index) in dataList" :key="index">
                <slot :data="item" :index="index"></slot>
            </div>

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

<script lang='ts' setup>
import { reactive } from "vue";
type names = {
    name: string,
    age: number
}
const dataList = reactive<names[]>([{
    name: '小林',
    age: 26
},
{
    name: '小王',
    age: 27
}, {
    name: '小李',
    age: 28
}, {
    name: '小石',
    age: 29
}, {
    name: '小林',
    age: 26
}])
</script>

<style scoped lang="scss">
.dialog_main {
    .header {
        height: 20vh;
        background: red;
        width: 100%;
    }

    .main {
        height: 50vh;
        width: 100%;
        background: yellow;
    }

    .footer {
        height: 30vh;
        width: 100%;
        background: blue;
    }
}
</style>