vu3__插槽的使用

插槽的分类：匿名插槽、具名插槽、作用域插槽、动态插槽

 一、匿名插槽

父

<template>
    <div>
        <A>
            <div>
                我是xxxxx的数据
            </div>
           <div>
                我是yyyyy的数据
           </div>
        </A>
    </div>
</template>

<script setup>
import A from '../components/A.vue'

</script>

<style>

</style>

子

<template>
    <div class="A">
       <h1>A组件</h1> 
       <header>
            头部
            <slot></slot>
       </header>
       <footer>
            底部
            <slot></slot>
       </footer>
    </div>
</template>

<script setup>
</script>

<style lang="scss">
.A{
    font-size: 26px;
}
</style>

二、具名插槽

父

<template>
    <div>
        <A>
            <template #xxx>
                <div>
                    我是xxxxx的数据
                </div>
                
            </template>
            <template v-slot:yyy>
                <div>
                    我是yyyyy的数据
                </div>
            </template>   
          
        </A>
    </div>
</template>

<script setup>
import A from '../components/A.vue'

</script>

<style>

</style>

子

<template>
    <div class="A">
       <h1>A组件</h1> 
       <header>
            头部
            <slot name="xxx"></slot>
       </header>
       <footer>
            底部
            <slot  name="yyy"></slot>
       </footer>
    </div>
</template>

<script setup>
</script>

<style lang="scss">
.A{
    font-size: 26px;
}
</style>

三、作用域插槽

父

<template>
    <div>
        <A>
            <template v-slot="{data}">
                {{data}}
            </template> 
        </A>
    </div>
</template>

<script setup>
import A from '../components/A.vue'

</script>

<style>

</style>

子

<template>
    <div class="A">
       <h1>A组件</h1> 
       <section>
            <div>
                中间
            </div>
           <div v-for="el in list" :key="el.id">
                <slot :data="el"></slot>
           </div>
       </section>
    </div>
</template>

<script setup>
let list =reactive([
   { id:1,name:"张三"},
   { id:2,name:"李四"}
])
</script>

<style lang="scss">
.A{
    font-size: 26px;
}
</style>

四、动态插槽

父

<template>
    <div>
        <A>
            <template #[str]>
                <div>
                    我是xxxxx的数据
                </div>
            </template>
        </A>
    </div>
</template>

<script setup>
import A from '../components/A.vue'
let str = ref('xxx')
</script>

<style>

</style>

子

 <header>
   头部
   <slot name="xxx"></slot>
</header>