vue3的插槽全家桶

插槽:父组件引入(import)子组件 模板绑定子组件 在子组件标签内传值 子组件文件内定义插槽(slot)进行接收

子组件

<template>
    <div style="">
          //这是H5的语义化标签哦不是封装的什么组件 不要误解
           <header style="width:100%;height:50px;background:red"> 
             <slot name="header"/>
           </header>
            <main style="width:100%;height:50px;background:green">
               <slot name="main"/>
            </main>
          <footer style="width:100%;height:50px;background:yellow">
            <slot name="footer" />     
          </footer>
           <div class="" style="width:100%;height:150px;background:blue">
                 <div class="" v-for="(item,index) in  dataslot " :key="item.name">
                     <slot :dates="item" :index="index" />
                 </div>
           </div> 
    </div>
</template>

<script setup lang="ts">
import  {reactive} from 'vue'
type slots={
    name:string,
    age:number
}
const  dataslot=reactive<slots[]>([
    {name:'小小被插入了1',age:100},
    {name:'小小被插入了2',age:200},
    {name:'小小被插入了3',age:300},
])
</script>

<style scoped>

</style>

父组件

 <template> 
     <Dialog>
    <!--
     v-slot简写:
     不可以在template上使用slot='xxx'必须v-slot:'xxx'
     写法1：
       #(符号)   eg(举例):v-slot:main=等同于=> #main 
      v-slot="{data,index}"==>#default="{data,index}"   {解构} 
      
      写法2：
      ts定义  let  nameslot=ref('main')
      模板绑定:#[nameslot]  ||  v-slot:[nameslot]    [nameslot]==>'main'
    -->
    <template #header>
        <div>
            我被插槽了上面
        </div>
    </template>
     <!--看script内定义这个变量    let  nameslot=ref('main')-->  
     <!-- <template v-slot:[nameslot]> -->
     <!-- 或者 --> 
     <template #[nameslot]>
        <div>
            我被插槽了中间 
        </div>
    </template>
    
     <template v-slot:footer>
        <div>
            我被插槽了下面
        </div>
    </template>

     <!-- <template v-slot="{dates,index}"> -->
         <!-- 或者 -->
     <template #default="{dates,index}">
        <div>
             {{dates}}--{{index}}
        </div>
    </template>
</Dialog>
</template>

<script setup lang="ts">
import  {reactive ,markRaw,ref} from 'vue'
import  Dialog  from '../Dialog/index.vue' 
// 插槽简写
let  nameslot=ref('main') 
</script>

<style scoped lang="less">
.bg-red{
    background: red;
}
.content{
    flex: 1;
     display: flex;
    // height: 100vh;
    margin: 20px;
    border-bottom: 1px solid #ccc;
    overflow: auto;
    &-items{
        padding:20px;border-bottom: 1px solid #ffffff;
    }
     .tab{
         height: 50px;
        border:1px solid red;
     }
     component{
         height: 30px;;
     }
}
</style>