demo请参考 这篇文章
本文是参考一些文章之后的整理。
插槽是一种模板,从模板角度来讲,模板可以分为插槽和非插槽
非插槽
- html 模板,eg:div,span, ul , table
- 显示,隐藏,如何显示均由组件自身控制。
插槽
- 显示,有隐藏,以及用什么样的html显示由父组件控制
- 但是,插槽显示的位置,却由子组件自身决定。
- Slot写在什么位置,那么父组件传过来的html就显示在什么位置。
插槽的分类
单个插槽 | 默认插槽 | 匿名插槽
- 一个组件只能有一个匿名插槽
- 顾名思义,该插槽没有提供插槽的name属性。这是和具名插槽最大的区别
具名插槽
- 一个组件可以有多个具名插槽
作用域插槽 | 带数据插槽
- 这种插槽和前面两种的区别:数据由谁提供。
- 默认插槽和具名插槽的数据都是由父组件提供的
- 作用域插槽的数据是其本身提供的。
- 举个例子
- 我们在使用table的时候, el-table-column就相当于子组件,我们在column中定义 slot-scope = "{row}”,该row是个形参。在html中使用该row时,
实际上是获取了该行所有的属性值,我们可以直接获取row中的属性进行操作。
- 我们在使用table的时候, el-table-column就相当于子组件,我们在column中定义 slot-scope = "{row}”,该row是个形参。在html中使用该row时,