Vue3插槽

插槽slot就是子组件提供给父组件使用的占位符,使用表示,可以填充任何模板代码
插槽有 匿名插槽,具名插槽,作用域插槽,动态插槽

1. 匿名插槽

1.子组件创建插槽

<template>
	<div>
	<slot></slot>
	</div>
<template>

2. 父组件使用插槽

<SlotDialog>
	<template v-slot>
	<div>123</div>
	</template
</SlotDialog>

或

<SlotDialog>
	<template #default>
	<div>123</div>
	</template
</SlotDialog>

2. 具名插槽

1. 创建插槽

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

2. 使用

<template v-slot:footer>
  <div>
    底部
  </div>
</template>

或

<template #footer>
  <div>
    底部
  </div>
</template>

作用域插槽

<main class="main">
  <div v-for="(item,index) in data">
    <slot :data="item" :index="index"></slot>
  </div>
</main>
<script setup lang=ts>
import {reactive} from "vue"
type names = {
  name: string,
  age: number
}

const data = reactive<names[]>([
  {
    name: "唐僧",
    age: 18
  },
  {
    name: "孙悟空",
    age: 600
  },
  {
    name: "猪八戒",
    age: 300
  },
  
])

</script>

2. 使用

<template #default="{data,index}">
  <div>
    {{ data.name }} - {{ data.age }} - {{ index }}
  </div>
</template>

动态插槽

<template #[slotName]>
  头部
</template>
<script setup lang=ts>
const slotName = ref('header')
</script>