v-slot 插槽的用法:
单个slot内容时:
子组件:
<slot></slot>
父组件:
<navigation-link>
Logged in as user
</navigation-link>
多个slot内容时(具名插槽):
子组件:
<div class="container">
<header>
<slot name="header"></slot>
</header>
<main>
<slot></slot>
</main>
<footer>
<slot name="footer"></slot>
</footer>
</div>
父组件:
<base-layout>
<template v-slot:header>
<h1>Here might be a page title</h1>
</template>
<p>A paragraph for the main content.</p>
<p>And another one.</p>
<template v-slot:footer>
<p>Here's some contact info</p>
</template>
</base-layout>
网友评论