tags: Vue.js ItIron2020

前言

前兩天我們已經介紹完vue中父子組件如何利用props & emit做溝通，到此為止你其實已經可以應付很多種情況了! 幹得好啊~! 今天我們插一個題外話，來介紹vue組件中很常使用到的插槽Slot! 內容相對前幾天會輕鬆很多，大家今天可以放鬆一下:D 那馬上就開始吧!

什麼是slot?

slot是vue組件中用來做內容分配的的API，就像一個插槽一樣，你可以根據情況在插槽內插入想要的內容，讓你的vue組件更加的泛用。 概念聽起來很抽象，我們一樣實際看個例子就可以很快了解了!

slot基本用法

還記得我們怎麼在vue中建立全域組件嗎? 現在我們隨便註冊一個新的組件叫做post! 程式碼就是像以下這樣。

<template>
  <div id="app">
    <post></post>
  </div>
</template>



Vue.component("post", {
  template: `
  <div>
    <div class="post-title">
       <h1>鐵人賽Day14紀錄</h1> 
    </div>
    <div class="post-body">
      <p>鐵人賽Day14!! 快一半了!</p>
    </div>
  </div>
  `,
});

毫不意外的，你會在頁面上看到以下的內容。

加入slot則是可以改寫為這樣，先看一下組件的部分

Vue.component("post", {
  template: `
  <div>
    <slot></slot>
  </div>
  `,
})

slot的部分表示要從父層插入的內容，往下看就會理解了

<template>
  <div id="app">
    <post>
        <div class="post-title">
           <h1>鐵人賽Day14紀錄</h1> 
        </div>
        <div class="post-body">
          <p>鐵人賽Day14!! 快一半了!</p>
        </div>
    </post>
  </div>
</template>

此時你在post組件標籤夾住的內容就會像把內容插入插槽一樣，最終渲染出一模一樣的結果。 今天你若是將內容改為

<post><h1>這就是slot的啦~!</h1></post>

最終渲染出來的程式碼結構就是

<div>
  <h1>這就是slot的啦~!</h1>
</div>

slot 備用內容(fallback content)

有時候也會碰到父層並沒有寫入任何內容，這時候你可以在原先的組件中加入預設的備用內容，當沒收到父層傳入的內容時，就會顯示預設內容。 我們稍微改寫一下上方post組件的內容。

Vue.component("post", {
  template: `
  <div>
    <slot>如果沒有內容，那我就印出這行字囉</slot>
  </div>
  `,
});

再次執行一樣的程式碼，你會發現沒有差別

<post><h1>這就是slot的啦~!</h1></post>

不過一旦沒有傳入任何內容，那我們就可以看到我們預期的輸出結果!

<post></post>

渲染出來的程式碼結構就是

<div>
  如果沒有內容，那我就印出這行字囉
</div>

命名插槽 (named slot)

在組件中你也可以寫入複數個slot，讓你父層在使用的同時更加彈性，在子層我們透過name屬性去將每個slot命名，父層時就可以針對該插槽去插入指定的內容，一樣我們看個簡單的範例吧! 再次修改我們的post組件
我們這次一次寫入三個插槽

Vue.component("post", {
  template: `
  <div>
    <slot name="title"></slot>
    <slot name="body"></slot>
    <slot></slot>
  </div>
  `,
})

上方的template則改為以下的寫法

<template>
  <div id="app">
    <post>
       <template #title>
         <h1>鐵人賽Day14紀錄</h1> 
       </template>
       <h3>我沒有被分配到插槽，我會直接插入slot預設位置</h3>
       <template #body>
         <p>鐵人賽Day14!! 快一半了!</p>
       </template>
    </post>
  </div>
</template>

這邊我們利用#title去尋找對應的插槽位置，它會對應到name為tilte的插槽
，特別注意一下上方的結構，其中h3並沒有指定任何插槽，這樣的情況就會直接對應到位置。 上方的程式碼會有以下的輸出結果

結語

今天我們簡單的介紹了一下插槽的概念，在應付結構複雜的組件時相當的方便，其中也有一些更為進階的用法，我們就留到之後再介紹，今天只要先了解這樣的概念即可，實際把玩過我認為印象會更為深刻，老樣子這裡提供今天的demo，沒問題的話我們大家就明天見囉~!

此文章同步發布於個人部落格，有興趣的大大也可以來參觀一下:D