【Vue3】插槽全家桶

插槽（Slots）是 Vue.js 框架中的一个功能，允许在组件内部预留一些可替换的内容。通过插槽，可以给父组件填充模板代码，让父组件向子组件传递自定义的内容，以便在子组件中进行展示或处理。

1. 匿名插槽

Son.vue

<template><div><header class="header"></header><main class="main"><slot></slot></main><footer class="footer"></footer></div>
</template><script setup lang="ts"></script><style scoped>
.header {height: 200px;background-color: red;color: white;
}.main {height: 300px;background-color: blue;color: white;
}.footer {height: 200px;background-color: green;color: white;
}
</style>

App.vue

<template><div class="content"><Son><template v-slot><div>插入中间</div></template></Son></div>
</template><script setup lang="ts">
import Son from './components/Son.vue'
</script><style scoped></style>

在这里插入图片描述

2. 具名插槽

Son.vue

<template><div><header class="header"><slot name="header"></slot></header><main class="main"><slot></slot></main><footer class="footer"><slot name="footer"></slot></footer></div>
</template><script setup lang="ts"></script><style scoped>
.header {height: 200px;background-color: red;color: white;
}.main {height: 300px;background-color: blue;color: white;
}.footer {height: 200px;background-color: green;color: white;
}
</style>

App.vue

<template><div class="content"><Son><template v-slot:header><div>插入上面</div></template><template v-slot><div>插入中间</div></template><template v-slot:footer><div>插入下面</div></template></Son></div>
</template><script setup lang="ts">
import Son from './components/Son.vue'
</script><style scoped></style>

在这里插入图片描述

3. 插槽作用域

Son.vue

<template><div><header class="header"><slot name="header"></slot></header><main class="main"><div v-for="(item,index) in data"><slot :index="index" :data="item"></slot></div></main><footer class="footer"><slot name="footer"></slot></footer></div></template><script setup lang="ts">
import { reactive } from 'vue';
type names = {name: string,age: number
}
const data = reactive<names[]>([{name: '张三', age: 18},{name: '李四',age: 19},{name: '王五',age: 20}
])</script><style scoped>
.header {height: 200px;background-color: red;color: white;
}.main {height: 300px;background-color: blue;color: white;
}.footer {height: 200px;background-color: green;color: white;
}
</style>

App.vue

<template><div class="content"><Son><template v-slot:header><!-- 简写为：#header --><div>插入上面</div></template><!-- 直接解构出 data index --><template v-slot="{ data, index }"><!-- 匿名插槽简写为：#default="{ data, index }" --><div>{{ data.name }}--{{ data.age }}--{{ index }}</div></template><template v-slot:footer><div>插入下面</div></template></Son></div>
</template><script setup lang="ts">
import Son from './components/Son.vue'
</script><style scoped></style>

在这里插入图片描述

4. 动态插槽

App.vue

<template><div class="content"><Son><template v-slot:[name]><!-- 或者简写为：#[name] --><div>我在哪儿？</div></template></Son></div>
</template><script setup lang="ts">
import { ref } from 'vue'
import Son from './components/Son.vue'
let name = ref('footer')
// let name = ref('deault') // 插入中间的匿名插槽
</script><style scoped></style>