父组件:
javascript
<template>
<div class="content">
<dialog1>
<!-- 第一种 -->
<!-- <template #header>
<div>header</div>
</template>
<template #default="{data, index}">
<div>{{data.name}} -- {{data.age}} -- {{index}}</div>
</template>
<template #footer>
<div>footer</div>
</template> -->
<!-- 第二种 动态插槽 -->
<template #[name]>
<div>我在哪~~~</div>
</template>
</dialog1>
<button @click="btn">点击</button>
</div>
</template>
<script setup lang="ts">
import { ref } from 'vue';
import dialog1 from './dialog1.vue';
const name = ref('header');
const btn = () => {
name.value == 'footer' ? name.value = 'header' : name.value = 'footer';
}
</script>
<style lang="scss" scoped>
</style>
子组件:
javascript
<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: '1',
age: 1
},
{
name: '2',
age: 2
},
{
name: '3',
age: 3
},
])
</script>
<style scoped>
.header {
height: 100px;
background-color: aqua;
}
.main {
height: 100px;
background-color:blanchedalmond;
}
.footer {
height: 100px;
background-color:blueviolet;
}
</style>