Vue3中插槽slot的使用

插槽就是一个占位符，用<slot></slot> 表示

• 匿名插槽

//子组件
<template>
    <div>
       <slot></slot>
    </div>
</template>

//父组件给这个插槽填充内容
<ParentCom>
   <template v-slot>
       <div>父组件填充的具体内容</div>
   </template>
</ParentCom>

• 具名插槽
  具名插槽其实就是给插槽取个名字,一个子组件可以放多个插槽，而且可以放在不同的地方，而父组件填充内容时，可以根据这个名字把内容填充到对应插槽中

//子组件
<div>
    <slot name="header"></slot>
    <slot></slot>
    <slot name="footer"></slot>
</div>

//父组件给这个插槽填充内容
<ParentCom>
    //简写    #header
    <template v-slot:header>
       <div>header</div>
   </template>
   //简写    #default
   <template v-slot>
       <div>默认</div>
   </template>
   //简写    #footer
   <template v-slot:footer>
       <div>footer</div>
   </template>
</ParentCom>

• 作用域插槽
  在子组件动态绑定参数 派发给父组件的slot去使用

//子组件
<div>
    <slot name="header"></slot>
    <div>
        <div v-for="item in 100">
            <slot :data="item"></slot>
        </div>
    </div>
    <slot name="footer"></slot>
</div>

//父组件
 <ParentCom>
    <template #header>
        <div>header</div>
    </template>
    //通过解构方式取值
    <template #default="{ data }">
        <div>{{ data }}</div>
    </template>
    <template #footer>
        <div>footer</div>
    </template>
</ParentCom>

• 动态插槽
  插槽可以是一个变量名

//父组件
<ParentCom>
    <template #[name]>
        <div>动态插槽</div>
    </template>
</ParentCom>

const name = ref('header')