插槽内容与出口

FancyButton.vue:

<button class="fancy-btn"> <slot></slot> <!-- 插槽出口 --> </button>

父页面使用：

<FancyButton> Click me! <!-- 插槽内容 --> </FancyButton>

最终渲染出的 DOM 是这样：

<button class="fancy-btn">Click me!</button>

插槽内容可以是任意合法的模板内容，不局限于文本。 如父页面可以使用：

<FancyButton> <span style="color:red">Click me!</span> <AwesomeIcon name="plus" /> </FancyButton>

渲染作用域

插槽内容无法访问子组件的数据。 父组件模板中的表达式只能访问父组件的作用域；子组件模板中的表达式只能访问子组件的作用域。

默认内容

SubmitButton.vue:

<button type="submit"> <slot> Submit <!-- 默认内容 --> </slot> </button>

父组件：

<SubmitButton />

或者：

<SubmitButton>Save</SubmitButton>

此时 , Save 会取代Submit

具名插槽

BaseLayout.vue:

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

父组件：

<BaseLayout> <template v-slot:header> <!-- header 插槽的内容放这里 --> </template> </BaseLayout>

其中<template v-slot:header>可以简写为 <template #header> 完整的使用：

<BaseLayout> <template #header> Here might be a page title </template> <template #default> <p>A paragraph for the main content.</p> <p>And another one.</p> </template> <template #footer> <p>Here's some contact info</p> </template> </BaseLayout>

作用域插槽

子组件MyComponent.vue:

<div> <slot :text="greetingMessage" :count="1"></slot> </div>

父组件使用：

<MyComponent v-slot="slotProps"> {{ slotProps.text }} {{ slotProps.count }} </MyComponent>

也可以在 v-slot 中使用解构：

<MyComponent v-slot="{ text, count }"> {{ text }} {{ count }} </MyComponent>

具名作用域插槽

父组件使用：

<MyComponent> <template #header="headerProps"> {{ headerProps }} </template> <template #default="defaultProps"> {{ defaultProps }} </template> <template #footer="footerProps"> {{ footerProps }} </template> </MyComponent>

高级列表组件示例

子组件：FancyList.vue

<ul> <li v-for="item in items"> <slot name="item" v-bind="item"></slot> </li> </ul>

父组件使用：

<FancyList :api-url="url" :per-page="10"> <template #item="{ body, username, likes }"> <div class="item"> <p>{{ body }}</p> <p>by {{ username }} | {{ likes }} likes</p> </div> </template> </FancyList>