Vue

Vue Slot

Slot: Web組件占位符

通過插槽，妥展組件

默認Slot

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
//父元件
<template>
    <BaseLayout>
        <template #header> <!-- 等同於 v-slot:header -->
            <h1>頁面標題</h1>
        </template>
        <template #default>
            <p>主要內容...</p>
        </template>
    </BaseLayout>
</template>

//子元件
<template>
<div>
    <header>
        <slot name="header"></slot>
    </header>
    <main>
        <slot></slot>
    </main>
</div>
</template>

默認Slot

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
// 子元件 <ChildComponemt></ChildComponemt>

<template>
<herder>
    <slot name="header"></slot>
</herder>
<div>
<main>
 <slot name="main"></slot>
</main>
</div>
</template>

// 父元件
//<ChildComponemt><template #header> ...</template> or  <template v-slot="main"> ...</template></ChildComponemt>
<template>
<ChildComponemt>
    <template #header>
       <div>Header Menu</div>
    </template>
    <main>
    <template v-slot="main">
    內容
    </template>
    </main>
</ChildComponemt>
</template>