Vue Slot用法

Vue在講組件時，建議最好不要在父做用域中傳值給子組件，不知道爲何用slot；

slot背景

爲何要用slot？

我的理解：

• 爲了保證組件內容的靈活性，組件的內容由其所在的上下文環境肯定；
• 將組件必要的內部層級透明地展示在組件所在的上下文環境中；

slot分類

默認的slot

默認的slot是指那些在調用組件時,沒有指定slot屬性的嵌套子節點。

示例：

<defined-component>
    <div>這是默認的slot節點</div>
    <div slot="definedSlot">這是命名的slot節點</div>
  </defined-component>

• 該節點在DefinedComponent.vue邏輯代碼中，能夠使用this.$slots.default來獲取默認的Array([VNode])：數組第一項便是封裝<div>這是默認的slot節點</div>的VueNode對象。
• 該節點在DefinedComponent.vue文件中，能夠使用<slot></slot>來承接默認的slot：

//DefinedComponent.vue
<template>
  <div>
    ...
    <slot></slot>
    ...
  </div>
</template>

命名的slot

命名的slot是指那些在調用組件時，指定slot屬性的嵌套子節點。

示例：

<defined-component>
    <div slot="definedSlot">這是命名的slot節點</div>
  </defined-component>

• 該節點在DefinedComponent.vue邏輯代碼中，能夠使用this.$slots.definedSlot來獲取命名的Array([VNode])。
• 該節點在DefinedComponent.vue文件中，能夠使用<slot name="definedSlot"></slot>來承接命名的slot。

//DefinedComponent.vue
<template>
  <div>
    ...
    <slot name="definedSlot"></slot>
    ...
  </div>
</template>

slot的應用

缺省的嵌套子節點

組件內須要根據所在上下文提供嵌套子節點，且須要設置缺省值的時候，能夠查看如下示例：

view/index.vue

<template>
  ...
  <navigation-bar :refresh="refresh"></navigation-bar>
  ...
</template>

components/Navigation.vue

<template>
  <header class="navigation_bar">
    <button @click="goBack" class="navigation_back">
      <span v-if="!hasTitle" class="back_tip">關閉</span>
    </button>
    <h2 v-if="hasTitle" class="navigation_title">{{title}}</h2>
    <slot>
      <!--缺省的嵌套子節點，如有默認的slot存在，則再也不渲染缺省的子節點-->
      <button class="refresh" @click="onRefresh">刷新</button>
    </slot>
  </header>
</template>

指定位置的slot

按照預約的坑位填坑。

view/index.html

<template>
  ...
  <null>
    <div slot="null">會被Null組件中的slot[name="null"]承接</div>
    <div slot="network">會被Null組件中的slot[name="network"]承接</div>
  </null>
  ...
</template>

components/Null.vue

<template>
    <div class="data-null">
      <nav>
        <slot name="null"></slot>
      </nav>
      <nav class="network-error">
        <slot name="network"></slot>
      </nav>
    </div>
</template>