# Vue 插槽

**Published by:** [super](https://paragraph.com/@super-2/)
**Published on:** 2021-10-12
**URL:** https://paragraph.com/@super-2/vue

## Content

Vue 实现了一套内容分发的 API，这套 API 的设计灵感源自 Web Components 规范草案，将 <slot> 元素作为承载分发内容的出口。 它允许你像这样合成组件：&#x3C;todo-button> Add todo &#x3C;/todo-button> 然后在 <todo-button> 的模板中，你可能有：&#x3C;!-- todo-button 组件模板 --> &#x3C;button class="btn-primary"> &#x3C;slot>&#x3C;/slot> &#x3C;/button> 当组件渲染的时候，<slot></slot> 将会被替换为“Add Todo”。&#x3C;!-- 渲染 HTML --> &#x3C;button class="btn-primary"> Add todo &#x3C;/button> 不过，字符串只是开始！插槽还可以包含任何模板代码，包括 HTML：&#x3C;todo-button> &#x3C;!-- 添加一个Font Awesome 图标 --> &#x3C;i class="fas fa-plus">&#x3C;/i> Add todo &#x3C;/todo-button> 或其他组件&#x3C;todo-button> &#x3C;!-- 添加一个图标的组件 --> &#x3C;font-awesome-icon name="plus">&#x3C;/font-awesome-icon> Add todo &#x3C;/todo-button> 如果 <todo-button> 的 template 中没有包含一个 <slot> 元素，则该组件起始标签和结束标签之间的任何内容都会被抛弃&#x3C;!-- todo-button 组件模板 --> &#x3C;button class="btn-primary"> Create a new item &#x3C;/button> &#x3C;todo-button> &#x3C;!-- 以下文本不会渲染 --> Add todo &#x3C;/todo-button>

## Publication Information

- [super](https://paragraph.com/@super-2/): Publication homepage
- [All Posts](https://paragraph.com/@super-2/): More posts from this publication
- [RSS Feed](https://api.paragraph.com/blogs/rss/@super-2): Subscribe to updates