0%

Vue 筆記 - Slot 插槽

vue.js

拆分元件是為了同一個功能被重複使用,但難免會遇到有特別的獨立資訊要放置在拆分的元件內,這時候就可以利用插槽的方式,在指定要放入的標籤內,替換掉原本的內容。

關鍵字為 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",
});