0%

[Vue] Vue 元件 - 插槽篇

發表於 分類於 Disqus：

使用元件的目的是為了同樣結構的重複使用，但有時我們會需要對元件內容作調整，這時就可以使用插槽來做調整。

單一插槽

當只有一個地方需要修改內容時，使用單一插槽即可。

在模板中用 <slot> 標籤預留一個空間，用來存放等一下在 HTML 中要新增的內容。

如果希望元件有預設的內容，寫在 <slot> 標籤中即可，如果 HTML 沒有新增的內容，則 <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
// 元件
Vue.component('single-slot-component', {
  template: '#singleSlotComponent',
});

// x-template 模板
<script type="text/x-template" id="singleSlotComponent">
  <div class="alert alert-warning">
    <h6>我是一個元件</h6>
    <slot>
        如果沒有內容，則會顯示此段落。
    </slot>
  </div>
</script>


// HTML

<!--內容需要替換的元件-->
<single-slot-component>
  <p>使用這段取代原本的 Slot。</p>
</single-slot-component>

<!--不需要替換內容的元件-->
<single-slot-component> </single-slot-component>

具名插槽

如果有多處內容需要替換，就需要搭配使用 <slot> 及 name 屬性，來綁定模板及要更換內容的 HTML 元素。

在元件模板中定義好插槽位置與自訂的 name 後，在 HTML 中就可以使用 <template> 元素 + v-slot 指令 + 插槽的 name，來達成數個地方的內容替換了。

注意，v-slot 只能用於 <template> 元素。

<template> 跟 <slot> 標籤在 HTML 中都不會被輸出，它們兩個的用途是互相配對，代表這個地方需要在 HTML 中替換成新的內容。<slot> 放置位置在元件模板中，<template> 放置位置在 HTML 中。

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
// 元件的模板
<div class="container">
  <header>
    <slot name="header"></slot>
  </header>
  <main>
    <slot></slot>
  </main>
  <footer>
    <slot name="footer"></slot>
  </footer>
</div>

// HTML
<base-layout>
  <template v-slot:header>
    <h1>Here might be a page title</h1>
  </template>

  <p>A paragraph for the main content.</p>
  <p>And another one.</p>

  <template v-slot:footer>
    <p>Here's some contact info</p>
  </template>
</base-layout>