Skip to main content

2-3. Component Slot

Slot​

子組件內的<slot>標籤，可給父組件來定義內容

<!-- SubmitButton.vue -->
<button type="submit">
  <slot></slot>
</button>

<!-- 父層Component -->
<submit-button>
  Save
</submit-button>

Slot預設內容​

<slot>內可以預設內容，如果父組件沒有定義內容則子組件使用預設內容。如果父組件有定義內容，則預設內容會被取代掉。

<!-- SubmitButton.vue -->
<button type="submit">
  <slot>Submit</slot>
</button>

練習​

  • 建立一個名稱為AppLightbox1.vue的檔案
  • 將前面的Lightbox改成用slot，由父組件來定義內容
<template>
  <div>
    <transition name="fade">
      <div class="lightbox" v-if="active">
        <div class="content">
          <slot></slot>
              </div>
        <div class="bg" @click="close"></div>
      </div>
    </transition>
  </div>
</template>

完成範例：AppLightbox1.vue

info

想進一步完整執行範例，可以至 Gitlab將整個教材的 Repo下載下來，Repo網址：https://gitlab.com/sdyou/ncut-vue-course。直接由畫面中的 Clone按鈕取得git clone資訊。

  • 範例的 vue-cli專案路徑：examples/2-3_slot

  • AppLightbox1的檔案路徑：examples/2-3_slot/src/components/AppLightbox1.vue

Slot的內容的作用域​

  • 當父組件定義子組件的<slot>內容時，父組件會先完成渲染才將內容帶入子組件。
  • 以程式為例，父組件的user為父組件的Data，子組件的user為子組件的Data，分別對應不同的實例的變數。
<!-- CurrentUser.vue（子component） -->
<span>
  <slot>{{ user.lastName }}</slot>
</span>

<!-- 父層Component -->
<current-user>
  {{ user.firstName }}
</current-user>

Slot的插槽prop (Vue v2.6以上語法)​

  • 父組件的v-slot加上屬性值（自訂名稱），即可用此變數訪問子組件資料
<tempalte v-slot:default="slotProps">{{slotProps.text}}</tempalte>
  • 子組件要使用v-bind來承接參數
<slot :text="text">預設內容</slot>