vue中的插槽

插槽

1、匿名插槽

 子组件中写上占位
 <slot></slot>
 父组件中：
 <Child>
     <template v-slot>
          <div>在子组件展示的内容</div>
	</template>
 </Child>

2、具名插槽

子组件中：
<slot name='header'></slot>
父组件:
<Child>
	<template v-slot:header>将在子组件中展示</template>
</Child>

3、作用域插槽（父组件用子组件里面的值）

子组件中：
<slot :dataList='data' :msg='msg'><slot>
let data = ref<Array<string>>([1, 2, 3, 4, 5])
let msg = ref<string>("123")
父组件中：
<Child>
	<template v-slot="{dataList, msg}">
		<div v-for='item in dataList' :key='item'>{{item}}  --  {{ msg }}</div>
	</template>
</Child>

4、动态插槽

<template #[name]>
	<div>插入到子组件中内容</div>
</template>

let name = ref('header')

注意： name为header的时候插入到header的位置；name为footer插入到footer的位置

插槽的简写方式
总体上来说v-slot写着比较长，可以改成#

比如：

具名插槽
<template #header>
	<div>插进去的内容</div>
</template>

作用域插槽
<template #default='{dataList}'>
	<div>插进去的内容</div>
</template>