拆分元件是為了同一個功能被重複使用，但難免會遇到有特別的獨立資訊要放置在拆分的元件內，這時候就可以利用插槽的方式，在指定要放入的標籤內，替換掉原本的內容。
關鍵字為 slot。
無插槽狀態
HTML
放入拆分的 x-template。
1
2
| <h2>沒有插槽可替換的狀態</h2>
<no-slot-component></no-slot-component>
|
x-template
沒有替換用的 slot。
1
2
3
4
5
6
| <script type="text/x-template" id="noSlotComponent">
<div class="alert alert-warning">
<h6>我是一個元件</h6>
<p>這沒有插槽。</p>
</div>
</script>
|
Vue 局部元件
1
2
3
| Vue.component("no-slot-component", {
template: "#noSlotComponent",
});
|
插槽基礎使用
HTML
放入拆分的 x-template。
1
2
3
| <single-slot-component>
<p>使用這段取代原本的 Slot。</p>
</single-slot-component>
|
x-template
下方元件中的 p 段落是想要替換的內容。
1
2
3
4
5
6
7
8
| <script type="text/x-template" id="singleSlotComponent">
<div class="alert alert-warning">
<h6>我是一個元件</h6>
<p>
如果沒有內容，則會顯示此段落。
<p>
</div>
</script>
|
若要將 HTML 預設的文字替換掉，可以把局部元件的文字標籤，改成 slot，就可以替換掉原本的預設內容，可為下方程式碼。
1
2
3
4
5
6
7
8
| <script type="text/x-template" id="singleSlotComponent">
<div class="alert alert-warning">
<h6>我是一個元件</h6>
<slot> // 修改此處
如果沒有內容，則會顯示此段落。
<slot>
</div>
</script>
|
這樣就完成了。
Vue 局部元件
1
2
3
| Vue.component("single-slot-component", {
template: "#singleSlotComponent",
});
|
具名插槽
當重複元件，但是要插入資料較多的內容，又不要動到原本的架構，就可以使用具名插槽來替換，若不想增加 HTML 標籤，可以使用 template，這樣就不會該標籤在 HTML 內。
HTML
放入拆分的 x-template，可以看見上方為沒有要替換的內容，下方是要替換的內容。
1
2
3
4
5
6
7
8
9
10
11
| <h2>具名插槽</h2>
<named-slot-component>
</named-slot-component>
<named-slot-component>
<header>替換的 Header</header>
<template>替換的 Footer</template>
<template>按鈕內容</template>
<p>其餘的內容</p>
</named-slot-component>
</div>
|
x-template
下方已將欲替換的插槽設定好，既然是具名插槽，就要給它名字 name=”輸入名稱”。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
| <script type="text/x-template" id="namedSlotComponent">
<div class="card my-3">
<div class="card-header">
<slot>這段是預設的文字</slot>
</div>
<div class="card-body">
<slot>
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">
With supporting text below as a natural lead-in to additional content.
</p>
</slot>
<a href="#" class="btn btn-primary">
<slot>spanGo somewhere</slot>
</a>
</div>
<div class="card-footer">
<slot>這是預設的 Footer</slot>
</div>
</div>
</script>
|
增加 name 後的 x-template，給予 name 名稱時建議對應標籤的名稱，這樣比較直覺。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
| <script type="text/x-template" id="namedSlotComponent">
<div class="card my-3">
<div class="card-header">
<slot name="header">這段是預設的文字</slot>
</div>
<div class="card-body">
<slot>
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
</slot>
<a href="#" class="btn btn-primary">
<slot name=btn>spanGo somewhere</slot>
</a>
</div>
<div class="card-footer">
<slot name="footer">這是預設的 Footer</slot>
</div>
</div>
</script>
|
替換 HTML
將要替換的插槽部分寫成 slot="對應名稱"，更新後的程式碼如下，
1
2
3
4
5
6
| <named-slot-component>
<header slot="header">替換的 Header</header>
<template slot="footer">替換的 Footer</template>
<template slot="btn">按鈕內容</template>
<p>其餘的內容</p>
</named-slot-component>
|
Vue 局部元件
1
2
3
| Vue.component("named-slot-component", {
template: "#namedSlotComponent",
});
|