如何在组件中只使用一个命名插槽？

【问题标题】：How to use only one named slot in the component?如何在组件中只使用一个命名插槽？
【发布时间】：2021-08-25 11:47:20
【问题描述】：

`我有一个包含不同插槽的组件，例如：

页眉槽、主槽和页脚槽

基础布局.vue

<template>
  <div class="container">
    <header>
      <slot name="header"></slot>
    </header>
    <main>
      <slot></slot>
    </main>
    <footer>
      <slot name="footer"></slot>
    </footer>
  </div>
</template>

我有另一个组件（Main）用于渲染到屏幕上。

<template>
  <base-layout>
    <template v-slot:header>
      <h2>Hello world</h2>
    </template>
  </base-layout>
</template>

Inside Main component I need only to use header slot, instead when I try to do so all the other slots are also getting picked up

【问题讨论】：

标签： vue.js

【解决方案1】：

如果提供了相应的插槽，您可以使用条件渲染来渲染它们：

<template>
  <div class="container">
    <header v-if="$slots.header">
      <slot name="header"></slot>
    </header>
    <main v-if="$slots.default">
      <slot></slot>
    </main>
    <footer v-if="$slots.footer">
      <slot name="footer"></slot>
    </footer>
  </div>
</template>

或者干脆做：

<template>
  <div class="container">
   
      <slot name="header"></slot>
  
      <slot></slot>
      <slot name="footer"></slot>

  </div>
</template>

in 父级提供 header、main 和 footer 等包装元素

<template>
  <base-layout>
    <template v-slot:header>
        <header><h2>Hello world</h2></header>
    </template>
  </base-layout>
</template

【讨论】：