Vue插槽的探索

slot作为vue进行内容分发的重要组成，对其作用一直是模模糊糊的，今天研究了一下，特意记录一些体会，希望对阅读到的你有所帮助。

---

slot分为默认插槽、具名插槽和作用域插槽，默认插槽和具名插槽相对简单，上代码：

• 默认插槽与具名插槽的最终效果

  
  
  浏览器效果
  
  
  F12 结构

总结：

• 使用插槽时，要让插槽展示对应内容必须在子组件中预留slot标签，并且父组件中要填写slot内容。
• 使用具名插槽时，父组件中的tempiate v-slot值必须对应子组件中slot标签上name属性值。
• 如果子组件中有多个默认插槽，父组件中填写的内容将会被分发到所有的默认插槽，页面上展示多个父组件内容。

---

接下来将作用域插槽作为重点：

作用域插槽顾名思义带数据的插槽，在实际开发过程中，公用组件的内容一成不变是不可能的，所以这就要求插槽的内容也是动态数据。

• 作用域插槽的最终效果

  
  
  image.png
  
  
  image.png

---

以上就是对vue插槽的粗鄙理解，如描述模糊，理解有误还请群公指正。

点赞就是爱！