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

Question

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

页眉插槽、主插槽和页脚插槽

基础布局.vue

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

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

<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

Answer 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