Vue3插槽的基本使用之匿名插槽、具名插槽、作用域插槽、动态插槽

官网介绍

匿名插槽，也就是不指定<slot> 的name属性的插槽

 	<h3>子组件中</h3>
 	<slot>
 	//  <slot>  === <slot name="default">
       匿名插槽的原默认内容
   </slot>

 	<h3>父组件中</h3>
 	 <template #default>
 	 //  <template #default> ===  <template>
     </template>

值得注意的是：

1. 在父组件中的#default这个属性可以不写
2. 在父组件中被template 标签包裹区域中存在内容是将替换子组件中slot标签包裹的内容反之不会

具名插槽，也就是指定<slot> 的name属性的插槽

 	<h3>子组件中</h3>
 	<slot name="main">
 	    具名插槽main中默认内容
     </slot>

 	<h3>父组件中</h3>
 	 <template #main>
 	    用来替换具名插槽main默认内容的内容
     </template>

在子组件中通过给slot标签绑定name属性可以指定插槽的名字
在父组件中通过给 标签加上#main 或v-slot:main 可以将内容绑定到子组件插槽名字为main的标签中

作用域插槽 无论是具名还是匿名皆可使用，用于将子组件中的特定数据暴露给父组件进行操作

<script setup lang='ts'>
// 子组件中
  import { ref } from 'vue'
  const data = ref({
    name:'张三',
    age:18
  })
</script>
<template>
<slot name="user" :data="data"></slot>
</template>

// 父组件中
  <template  #user="{data}">
        用户名：{{ data.name }}<br>
        用户名：{{ data.age }}
   </template>

通过 #user="{data[,xx]}" 可以将子组件中给user插槽上绑定的data属性在父组件中解构出来
在子组件中通过:data="data" 的方式绑定属性暴露给父组件，并且可以暴露多个
如果是匿名插槽则需要使用#default这个来找到子组件中的匿名插槽进行解构数据

动态插槽

// 子组件 Slots.vue中
<template>
  <div>
      <h3>具名插槽main</h3>
    <slot name="main">
        具名插槽main的默认内容
    </slot>
     </div>
</template> 

<!-- 动态插槽 父组件中 -->
<script setup lang='ts'>
import { ref } from "vue";
import Slots from "./Slots.vue";

const name = ref('main')
</script>
<template>
<Slots >
      <template #[name]>
        这里是动态插槽插入的内容
      </template>
      </Slots >
 </template>     

效果图