vue3 插槽

携手创作，共同成长！这是我参与「掘金日新计划 · 12 月更文挑战」的第2天，点击查看活动详情

插槽

# 匿名插槽
```
    父：
		<A>
			这是xxxxx数据
			这是yyyyy数据
		</A>

	子：
		<header>
			<div>头部</div>
			<slot></slot>
		</header>

		<footer>
			<div>底部</div>
			<slot></slot>
		</footer>
                    ```
     
     
# 具名插槽
    
```
    父：
		<A>
			<template v-slot:xxx>
				这是xxxxx数据
			</template>

			<template v-slot:yyy>
				这是yyyyy数据
			</template>
		</A>

		***简写：<template #xxx>
	子：
		<header>
			<div>头部</div>
			<slot name='xxx'></slot>
			<slot name='yyy'></slot>
		</header>

		<footer>
			<div>底部</div>
			<slot name='xxx'></slot>
		</footer>
                    ```

# 作用域插槽

```	父：
		<template v-slot='{data}'>
			{{ data.name }} --> {{ data.age }}
		</template>

		简写：<template #default='{data}'>
	子：
		<div v-for='item in list' :key='item.id'>
			<slot :data='item'></slot>
		</div>

	# 动态插槽：
        

	说了就是通过数据进行切换

	父：

		<template #[xxx]>
			这是xxxxx数据
		</template>

		<script setup>
		let xxx = ref('xxx');
		</script>