Vue3插槽

1.匿名插槽

 <headerVue>
        <template v-slot>
          <div>我被插入了hhh</div>
        </template>
 </headerVue>

<template>
  <div class="head">
    <slot></slot>
  </div>
</template>

2.具名插槽

<template>
  <div class="head">
    <slot name="header"></slot>
    <slot name="also"></slot>
  </div>
</template>

 <headerVue>
        <template v-slot:header>
          <div>我被插入了hhh</div>
        </template>
        <template v-slot:also>
          <div>
            我也被插入了
          </div>
        </template>
      </headerVue>

3.作用域插槽

子对父：

1.子组件类型确定，子组件传值确定

type names={
  name:string,
  age:number
}

const data=reactive<names[]>([
    {
      name:'小王',
      age:15
    },
    {
      name:'小李',
      age:16,
    },
    {
      name:'小赵',
      age:17,
    }
  ])

2.循环遍历，依次绑定数值

 <div v-for="(item,i) in data" :key="i">
            <slot :data="item"></slot>
        </div>

3.父组件接收数据，并解构出值，依次插入

 <template v-slot="{data}">
          {{data.name}}
        </template>

4.动态插槽:

插槽的父组件传递值data

 
<template #[data]>
        <div>
          这是动态插槽
        </div>
      </template>

let data=ref('footer')

被插入的子组件里有footer

<slot name="footer"></slot>

作用:可通过改变data来改变插入的位置 

小知识:

1."v-slot:"可简写为#

2.解构赋值时" v-slot="可简写为#default=