本文主要是介绍slot 插槽笔记（与文档基本没差别，仅作学习记录），希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
文档地址
github
Vue 实现了一套内容分发的 API，这套 API 的设计灵感源自 Web Components 规范草案，将
<slot>元素作为承载分发内容的出口。
例子（Vue 2.6.0 以上语法）
1. 插槽内容
子组件 <navigation-link>
<a v-bind:href="url" class="nav-link" ><slot></slot>
</a>
父组件
<navigation-link url="/profile">Your Profile
</navigation-link>
当组件渲染的时候，
<slot></slot>将会被替换为“Your Profile”。
插槽内可以包含任何模板代码：
<navigation-link url="/profile"><!-- 添加一个 Font Awesome 图标 --><span class="fa fa-user"></span>Your Profile
</navigation-link>
甚至其它的组件：
<navigation-link url="/profile"><!-- 添加一个图标的组件 --><font-awesome-icon name="user"></font-awesome-icon>Your Profile
</navigation-link>
如果
<navigation-link>没有包含一个<slot>元素，则该组件起始标签和结束标签之间的任何内容都会被抛弃。
2. 默认内容（后备内容）
子组件 <submit-button>
<button type="submit"><slot>Submit</slot> <!-- Submit 就是后备内容 -->
</button>
父组件
- 当在一个父级组件中使用
<submit-button>并且不提供任何插槽内容时，后备内容“Submit”将会被渲染：
<submit-button></submit-button>
- 如果提供内容，则这个提供的内容将会被渲染从而取代后备内容：
<submit-button>Save</submit-bu这篇关于slot 插槽笔记（与文档基本没差别，仅作学习记录）的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
