Vue 插槽

组件定义 <base-layout></base-layout>

<div class="container">
    <header>
        <slot name="header" :row="row"></slot>
    </header>
    <main>
        <slot name="default" :row="row"></slot>
    </main>
    <footer>
        <slot name="footer" :row="row"></slot>
    </footer>
</div>

vue 2.*

<base-layout>
    <template slot="header" slot-scope="scope">
        {{ scope.row }}
    </template>
    <template slot="default" slot-scope="scope">
        {{ scope.row }}
    </template>
    <template slot="footer" slot-scope="scope">
        {{ scope.row }}
    </template>
</base-layout>

// 简写
<base-layout>
    <template slot="header" slot-scope="scope">
        {{ scope.row }}
    </template>
    <template slot-scope="scope">
        {{ scope.row }}
    </template>
    <template slot="footer" slot-scope="scope">
        {{ scope.row }}
    </template>
</base-layout>

vue 3.*

<base-layout>
    <template v-slot:header="scope">
        {{ scope.row }}
    </template>
    <template v-slot:default="scope">
        {{ scope.row }}
    </template>
    <template v-slot:footer="scope">
        {{ scope.row }}
    </template>
</base-layout>

// 简写
<base-layout>
    <template #header="scope">
        {{ scope.row }}
    </template>
    <template #default="scope">
        {{ scope.row }}
    </template>
    <template #footer="scope">
        {{ scope.row }}
    </template>
</base-layout>