<template lang="html">
<div>
<!-- <Dialog>
<template v-slot:header>
<div>232</div>
</template>
<template v-slot="{ data, index }">
<div>{{ data.name }}----{{ data.age }}sddssd{{ index }}</div>
</template>
<template v-slot:footer>
<div>sdsdsggfhhg</div>
</template>
</Dialog> -->
<!-- 第二种写法 -->
<Dialog>
<template #header>
<div>232</div>
</template>
<template #default="{ data, index }">
<div>{{ data.name }}----{{ data.age }}sddssd{{ index }}</div>
</template>
<template #footer>
<div>sdsdsggfhhg</div>
</template>
</Dialog>
<!-- 动态插槽 -->
<Dialog>
<template #[name]>
<div>wodfgghfh</div>
</template>
</Dialog>
</div>
</template>
<script lang="ts" setup>
import Dialog from "./components/dialog.vue";
import { ref } from "vue";
let name = ref("header");
</script>
<style lang="scss"></style>
组件:
<template lang="html">
<div>
<header class="header">
<slot name="header"></slot>
</header>
<main class="main">
<div v-for="(item, index) in data">
<slot :data="item" :index="index"></slot>
</div>
</main>
<footer class="footer">
<slot name="footer"></slot>
</footer>
</div>
</template>
<script lang="ts" setup>
import { reactive } from "vue";
type names = {
name: string;
age: number;
};
const data = reactive<names>([
{
name: "小满被插入了",
age: 122,
},
{
name: "小满被插入了",
age: 42,
},
{
name: "小满被插入了",
age: 54,
},
{
name: "小满被插入了",
age: 65,
},
{
name: "小满被插入了",
age: 54,
},
]);
</script>
<style lang="scss">
.header {
width: 100vw;
height: 200px;
background: red;
color: #fff;
}
.main {
width: 100vw;
height: 200px;
background: blue;
color: #fff;
}
.footer {
width: 100vw;
height: 200px;
background: green;
color: #fff;
}
</style>