vue3之插槽

插槽（slot）是指可以在父组件内自定义模版片段，在子组件中可以将定义的模版片段插入到子组件的特定位置。

1.匿名插槽（默认插槽）

//父组件
<template>
  <Header>
    <div>匿名插槽</div>
  </Header>
</template>

//子组件
<template>
  <!-- 匿名插槽 -->
  <slot/>
</template>

2.具名插槽

//父组件
<template>
  <Header>
    <template v-slot:text>    //v-slot:text也可简写为#text
      具名插槽
    </template>
  </Header>
</template>

//子组件
<template>
  <!-- 具名插槽 -->
  <slot name="text"></slot>
</template>

注：vue3中使用v-slot只能添加在<template>上

3.作用域插槽

子组件向父组件传递数据，并在父组件定义的模版中渲染

//子组件
<template>
    <!-- 具名插槽 -->
    <slot name="text" user="milan" age=20></slot>
</template>

//父组件
<template>
  <Header>
    <template #text="data">   //#text="data"也可写成#text={user,age}
      {{ data.user }}
      {{ data.age }}
      具名插槽
    </template>
  </Header>
</template>