iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 16
0

元件插槽 Slot

我們會將需要重複使用的區塊建立成元件,這樣可以方便我們重複使用,但是如果遇到我需要替換部份內容的時候,該怎麼辦呢?難道要再新建一個元件嗎?答案是不需要的,如果要替換掉某些內容的話,可以使用 slot 來替換,現在就讓我們來看範例:

<div id="app">
  <no-slot></no-slot>
</div>

<script type="text/x-template" id="noSlot">
  <div>
    <h2>Component</h2>
    <p>沒有插槽</p>
  </div>
</script>
Vue.component('no-slot', {
    template: '#noSlot'
})

首先是沒有使用 slot 的樣版,這裡顯示的畫面應該可以想像得到了,但是如果我在元件內部又加入新的內容呢?

<div id="app">
  <no-slot>新增的內容</no-slot>
</div>

加入的新內容並不會顯示出來唷!但是如果有使用 slot 的話又會怎麼樣呢?

<div id="app">
  <single-slot>
    <p>有使用 slot 就可以插入新的內容。</p>
  </single-slot>
</div>

<script type="text/x-template" id="singleSlot">
  <div>
    <h2>Component</h2>
    <slot>如果沒有 slot ,內容顯示這裡</slot>
  </div>
</script>
Vue.component('single-slot', {
    template: '#singleSlot'
})

這裡的結果你會看到,我們元件內的 slot 標籤的內容被我新增的段落的內容給替換掉了,但是如果有使用到 slot 卻沒有要插入新的內容又會怎麼樣呢?其實,如果是這樣的話,那就會顯示 slot 的內容唷!
那如果內容有很多要替換的話,該怎麼準確的替換掉正確的內容呢?來看下面範例:

<div id="app">
  <name-slot>
    <h3 slot="head">替換掉的內容</h3>
  </name-slot>
</div>


<script type="text/x-template" id="nameSlot">
  <div>
    <h2>Component</h2>
    <p>一個段落</p>
    <slot name="head">一個 H3</slot>
    <h4>一個 H4</h4>
  </div>
</script>
Vue.component('name-slot', {
    template: '#nameSlot'
})

這裡可以看到,我們可以給要被替換的 slot 的內容一個 name 的屬性,並且在要替換的內容上給一個 slot 的屬性,兩者的值都給 head ,這樣就能成功替換掉正確的內容了,而 head 是自定義的名稱,接下來你可以試著將元件的內容全部換成 slot 標籤,並且嘗試自己替換掉正確的內容唷!

那麼,明天再見囉!


上一篇
Day 15 : emit 向外層傳遞資訊
下一篇
Day 17 : 動態切換元件
系列文
Vue 學習筆記 - 讓你30天掌握 Vue31
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言