[Vue] 元件-Slot的Props

TL;DR

元件可以提供插槽給外層去插入程式碼片段。但是有時候該插槽會需要使用到內層元件的某些資料。

這就稱為Slot的Props。

藍色父曾元件插入一個片段到綠色子層元件內，但是該片段需要取用到部分的子層資料（綠色圓圈）

這時候就需要使用slot的props

參考資料

• 鐵人賽：ES6 解構賦值 | 卡斯柏

相關連結

• Vue作用域插槽 | Official Docs

---

圖示

<<MyComponent> 的模板

<div>
  <slot :text="greetingMessage" :count="1"></slot>
</div>

parents template

<MyComponent v-slot="slotProps">
  {{ slotProps.text }} {{ slotProps.count }}
</MyComponent>

官方網站圖示

範例

雖然平時開發比較少這樣使用，但是有時候第三方套件也會採用這種方式去傳遞資料。在這邊做個紀錄：

html(#app)

<div id="app">
  <div class="p-5">
    <h3>插巢 Prop</h3>
    <p>將元件內的變數取出使用，稱為 slot prop</p>
    <card>
      <template #default="slotProps">
        {{slotProps}}
      </template>
    </card>
    <hr>
    <h2>多個（解構）</h2>
    {{ product }}
    <card2 :product="product">
      <template #default="{product,veganName='如果slot沒有傳出veganName變數時會使用此預設字串'}">
        {{product}} {{veganName}}
      </template>
    </card2>
  </div>
</div>

vue

const app = Vue.createApp({
  data() {
    return {
      product: {
        name: '蛋餅',
        price: 30,
        vegan: false
      }
    }
  },
});

app.component('card', {
  data() {
    return {
      product: {
        name: '蛋餅',
        price: 30,
        vegan: false
      },
      product2:{
        name: '蔥抓餅',
        price: 80,
        vegan: true
      }
    }
  },
  template: `<div class="card" style="width: 18rem;">
      <div class="card-body" >
        <slot :pd1="product" :pd2="product2"></slot>
      </div>
    </div>`
});

app.component('card2', {
  props: ['product'],
  data() {
    return {
      veganName: ''
    }
  },
  created() {
    console.log()
    this.veganName = this.product.vegan ? '素食' : '非素食';
  },
  template: `<div class="card" style="width: 18rem;">
      <div class="card-body" >
        <slot :product="product" :veganName="veganName"></slot>
      </div>
    </div>`
})

app.mount('#app');

傳入slot的props為陣列

使用#slotName="slotProps" 中，slotProps會是一個陣列。這是因為slot可以傳入多個值的關係。

而slot在傳入時所指定的屬性名(:pd1="dataPd1")稱即為slotProps中物件的屬性名稱(slotProps:{pd1:dataPd1})

解構賦值

在第二個範例中(Line:14)，使用 解構賦值的方式去取出product與veganName，所以也可以使用預設值的方式去設定當slot沒有傳出veganName時要帶入的內容。