Vue Slot

為其他組件先留個位子

索引index

slot基本用法

named slot: 為slot命名

slot props: slot component中取得slot的props

進階用法

slot基本用法

在component預留位置給其他組件，讓組件的重用更加具有彈性！

// custom button wrapper
<template>
  <button class="basic-button" @click="onClick">
    <slot></slot>
  </button>
</template>
// 將組件填入其中
<BasicButton>
  <h3>Content in button</h3>
</BasicButton>

注意: 即便是在slot中的component，也無法取得包住他的component的props/data，因為是不同的scope

<BasicButton href="./some-url">
  <h3>{{ href }}</h3>  // ==> href: undefined
</BasicButton>

slot預設值

如果沒有放component於slot中，有預設值/組件時就會顯示，如果有的話就會覆蓋掉預設值

<button class="basic-button" @click="onClick">
  <slot>default button text here</slot>
</button>
// use with no slot component
<BasicButton></BasicButton>
// 等同於
<button //...>
  default button text here
</button>

named slot: 為slot命名

當我們component有多個slot的情境時，我們可以用2.6.0新增的name為slot命名，使用<template>配上v-slot，讓我們可以更彈性地安排component

// BasicButton
<template>
  <div>
    <slot name="other-content"></slot>
    <button class="basic-button" @click="onClick">
      <slot name="button-text"></slot>
    </button>
  </div>
</template>
//組件填入其中
<ButtonWrapper>
  <template v-slot:button-text>
    <h2>Send :)</h2>
  </template>
  <template v-slot:other-content>
    <p>Some Custom Content</p>
  </template>
</ButtonWrapper>

備註: 上面使用沒有name的slot，name預設為default

<slot></slot>
// 等同於
<template v-slot:default>
  //...
</template>

可以縮寫為#{name}

(適用於2.6.0之後)

<template v-slot:button-text></template>
//等同於
<template #button-text></template>

slot props

如果要在slot的組件中使用上一層的props，可以將props v-bind給slot，子component則從v-slot=”slotProps”(slotProps的名稱僅為範例，可以任意命名)

// UserPage wrapper
<div>
  <slot name="user" :user="userData" />
  <hr />
  <p>{{ userData.profile }}</p>
</div>
{
  data() {
    return ({
      userData: {
        iconImgSrc: 'https://vuejs.org/images/logo.png',
        profile: 'loremContent',
      },
    });
  },
}
// child component
<div>
  <img :src="iconImgSrc" />
</div>
// usage
<UserPageWrapper>
  <template v-slot:user="slotProps">
    <UserIcon :iconImgSrc="slotProps.user.iconImgSrc" />
  </template>
</UserPageWrapper>

注意: v-slot=”slotProps” 和named v-slot:otherName=”otherSlotProps”不可混用，預設的v-slot要改用v-slot:default=””

// 不能這樣做
<Wrapper>
  <template v-slot="slotProps"></template>
  <template v-slot:otherName="otherSlotProps"></template>
</Wrapper>
// 要加上:default
<Wrapper>
  <template v-slot:default="slotProps"></template>
  <template v-slot:otherName="otherSlotProps"></template>
</Wrapper>

進階用法

可使用es6的解構object

// 承接slotProps的範例
<template v-slot:user="{ user }"></template> 
// { iconImgSrc: 'https://vuejs.org/images/logo.png', }
<template v-slot:user="{ user: { iconImgSrc }, }"></template> 
// 'https://vuejs.org/images/logo.png'

動態slot name

<template v-slot:[DYNAMIC_SLOT_NAME]></template>

參考/引用

slots: https://vuejs.org/v2/guide/components-slots.html