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

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>