slot插槽

理解

在我们的电脑主板上也有各种各样的插槽，有插CPU的，有插显卡的，有插内存的，有插硬盘的。我们可以理解slot为要占出当前的位置，方便我们插入内容。

或者可以这样理解：要去吃饭了，儿子先去占座，然后等他爸爸来了再一起吃。

slot的意思是插槽，Vue使用slot的作用是做内容分发。所谓的内容分发其实就是将父组件的内容放到子组件指定的位置叫做内容分发。

匿名插槽

• 无name属性
• 在组件中只可以使用一次
• 父组件提供样式和内容

image.png

image.png

如果子组件没有,即使在父组件的子组件标签内容写了内容，也不会生效。子组件会直接覆盖。

所以是，slot是一个在子组件的占位符。

具名插槽

• 有name属性
• 在组件中可以使用N次
• 父组件通过html模板上的slot属性关联具名插槽
• 没有slot属性的html模板默认关联匿名模板
• 父组件提供样式和内容

image.png

作用域插槽（带数据的插槽）

• 父组件只提供样式，子组件提供内容
• 在slot上面绑定数据
• 子组件的值可以传给父组件使用
• 父组件展示子组件数据有3种方式：flex显示、列表显示、直接显示
• 使用slot-scope必须使用template
• scope返回的值是slot标签上返回的所有属性值，并且是一个对象的形式保存起来
• slot有两个属性，一个row,另一个是index

通过3种方式显示数据的最终呈现效果分别如下：

• span:

  
  
  image.png
• 列表显示

image.png

• 直接显示

  
  
  image.png

父组件如果要使用这些数据必须要通过template模板结合slot-scope来呈现。

参考文章

对Vue插槽slot的理解