110 Named Slots

示例

BaseCard.vue（两个slot，其中一个命名为header）

<template>
    <div>
        <header>
            <slot name="header"></slot>
        </header>
        <slot></slot>
    </div>
</template>

UserInfo.vue（v-slot:指定使用的slot，default代表没有命名的slot）

<template>
  <section>
    <base-card>
      <template v-slot:header>
        <h3>{{ fullName }}</h3>
        <base-badge :type="role" :caption="role.toUpperCase()"></base-badge>
      </template>
      <template v-slot:default>
        <p>{{ infoText }}</p>
      </template>
    </base-card>
  </section>
</template>