vue (12) vue slot 插槽

發表於 更新於 分類於
使用 vue slot 開放元件內部結構

slot 插槽

Vue 元件裡的 slot插槽，讓我們可以在元件模板裡替換部分內容。以下介紹用法。

  • 沒有插槽的情況:

vue元件內，如果沒有slot 插槽，則插入的標籤不會被顯示。

  • 單一插槽的情況


在元件內 加入<slot></slot>插槽，則 p 段落可被插入模板中。

  • 具名插槽:

當我們的模板裡，有多個地方要替換內容時，可以使用具名插槽。

在外層用 v-slot: 指定插入的位置，default為預設插入位置。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// 一般寫法
<card2>
  <template v-slot:header>我喜歡這張卡片</template>
  <!--  預設請加入 default  -->
  <template v-slot:default>這是卡片 2 號</template>
  <template v-slot:footer>這是卡片腳</template>
</card2>

// # 縮寫
<card2>
  <template #header>我喜歡這張卡片</template>
  <!--  預設請加入 default  -->
  <template #default>這是卡片 2 號</template>
  <template #footer>這是卡片腳</template>
</card2>
1
2
3
4
5
6
7
8
9
10
11
12
template: `
<div class="card" style="width: 18rem;">
  <div class="card-header">
    <slot name="header">元件 Header</slot>
  </div>
  <div class="card-body">
    <slot>這段是預設的文字</slot>
  </div>
  <div class="card-footer">
    <slot name="footer">元件 Footer</slot>
  </div>
</div>`

在元件內部 用 name 標示指定插槽位置，沒有加name則為預設插入位置。