`我有一个包含不同插槽的组件,例如:
页眉槽、主槽和页脚槽
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 槽,而不是当我尝试这样做时所有其他槽也被拾取
最佳答案
如果提供了相应的插槽,您可以使用条件渲染来渲染它们:
<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
https://stackoverflow.com/questions/67887771/