vue3的插槽全家桶
10/100

「笔耕不辍」-生命不止，写作不息

发布文章
weixin_45441173
未选择任何文件
new

插槽:父组件引入(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>

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

子组件

<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>

name:string,
age:number

}
const dataslot=reactive<slots[]>([

{name:'小小被插入了1',age:100},
{name:'小小被插入了2',age:200},
{name:'小小被插入了3',age:300},

])

父组件

 <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>

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;;
 }

}

Markdown 1889 字数 123 行数 当前行 1, 当前列 0HTML 1785 字数 104 段落