<template>
    <slot name="header" :header="header"> header {{ header }}</slot>
    <slot :default="default"> default {{  default }}</slot>
    <slot name="footer" :footer="footer"> footer {{ footer }}</slot>
</template>

<script>
export default {
    data() {
        return {
            header: 'Header value',
            default: 'Default value',
            footer: 'Footer value',
        };
    },
};
</script>