vue插槽slot用法

父组件：

 
<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>

子组件：

 
<script setup lang="ts">
import { reactive } from 'vue';
type names = {
    name: string,
    age: number
}
const data = reactive([
    {
        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>