＜ 今日份知识点：浅述对 “ Vue 插槽 (slot) ” 的理解 以及 插槽的应用场景 ＞

•  前言
•  一、插槽概述 及 作用
• • > 插槽分类
  • • ① `默认插槽`
    • ② `具名插槽`
    • ③ `作用域插槽`
  • > 应用场景
  • > 小结
•  二、实际案例
• • > 组件内容
  • > 使用
  • > 效果图
•  小温有话说
• 参考文档
• 往期内容 

在 日常开发中，我们可能会对一些需要重复使用的内容进行组件化开发！ 但是有时候我们会发现有些代码内容仅仅只是一个布局或者外面一层结构相同，实际展示的内容却不同。这时，我们就需要使用到 Vue中的一个重要知识点： Vue插槽（ v-slot ）！

顾名思义，插槽就是一个可以镶嵌内容的坑位，就好比90年代的小霸王游戏机，我们都多少知道，一部游戏机它是可以玩很多游戏的，但是为了不用因为更换游戏，而更换游戏机本体，造成造价提高。

游戏机厂商很聪明的发明了，利用了插槽这个概念，发明了小霸王游戏机。 我们只需要更换存储游戏的卡片，就可以更换游戏种类，它和上面小温所说的意义相同，话不多说，上图片理解：

Vue 实现了一套内容分发的 API，这套 API 的设计灵感源自 Web Components 规范草案，将 元素作为承载分发内容的出口。

它允许你像这样合成组件，运用插槽实现占位，自定义填充不同的内容：

  Your Profile

然后你在 的模板中可能会写为：

当组件渲染的时候， 占位的位置将会被替换为“Your Profile”。插槽内可以包含任何模板代码，包括 HTML。

  
  
  Your Profile

如果在组件内部，没有提前设置 占位。如果不设置插槽占位的话，外部自定义插入的内容都将被舍弃。

上面案例即是默认插槽

有时我们需要往一个组件内，插入多个需要区分开的自定义内容时，就需要对不同插槽进行命名，用于区分不同内容。

• 子组件用name属性来表示插槽的名字，不传为默认插槽

• 父组件中在使用时在默认插槽的基础上加上v-slot属性，值为子组件插槽name属性值

案例： 需要实现将不同内容，按照定义好的布局插入。

  

    
    
  
  

    
    
  
  


----------------------------------------------------------------------------------------------



  

  
A paragraph for the main content.
  
And another one.
	
	
	

  

 注意: v-slot 只能添加在