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

Question

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

页眉槽、主槽和页脚槽

base-layout.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>

在 Main 组件中我只需要使用 header 槽，而不是当我尝试这样做时所有其他槽也被拾取

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>

父级提供包装元素，如 header、main 和 footer

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