Vue slot 用法详解

一个组件的展示层你需要做到大体结构固定，但其内的部分结构可变，样式表现不固定。例如 Button 中是否显示 icon，或者 Modal 框的中间内容展示区域的变化等，要通过子组件自己实现是不可能的。组件并不直接支持 HTML DOM 结构的传递，此时就可以通过使用 slot 作为 HTML 结构的传递入口来解决问题。

v-slot 用法

在 2.6.0 版本中，Vue 为具名插槽和作用域插槽引入了一个新的统一的语法 （即  指令）。它取代了 slot 和 slot-scope 这两个目前已被废弃、尚未移除，仍在文档中的特性。

使用方法可以分为三类：默认插槽、具名插槽以及作用域插槽。

◎ 默认插槽

子组件编写：在组件中添加  元素，来确定渲染的位置。

// 子组件

父组件编写：任何没有被包裹在带有 v-slot 的