本文共 779 字，大约阅读时间需要 2 分钟。

一丶为什么使用slot

（一）slot翻译为插槽

• 在生活中很多地方都有插槽，电脑的USB插槽，插板当中的电源插槽
• 插槽的目的是让我们原来的设备具有更多的扩展性
• 比如电脑的USB我们可以插入U盘，硬盘，手机，音响，键盘，鼠标等

（二）组件的插槽

• 组件的插槽也是为了让我们封装的组件更具有扩展性
• 让使用者可以决定组件内部的一些内容到底展示什么

（三）例子：移动网站中的导航栏

• 移动开发中，几乎每个页面都有导航栏
• 导航栏我们必然会封装成一个插件，比如nav-bar组件
• 一旦有了这个组件，我们就可以在多个页面中复用

二丶如何封装这类插件呢？slot

（一）如何去封装这类的组件呢？

• 它们也很多区别，但是也有很多共性
• 如果，我们每一个单独去封装一个组件，显然不合适
• 比如每个页面都返回，这部分内容我们就要重复去封装
• 但是，如果我们封装成一个，好像也不合理
• 有些左侧是菜单，有些是返回，有些中间是搜索，有些事文字等等

（二）如何封装合适呢？抽取共性，保留不同

• 最好的封装方式就是将共性抽取到组件中，将不同暴露为插槽
• 一旦我们预留了插槽，就可以让使用者根据自己的需求，决定插槽中插入什么内容
• 是搜索框，还是文字，还是菜单，由调用者自己来决定

（三）这就是使用slot的意义所在

三丶案例代码

   
   
   
     
     
   
   
   
   
  
        
     按钮  
      
        
     呵呵呵    
     
      我是DIV元素
     
    
     
我是段落
  
      
    
   
   

四丶运行结果

——仰天大笑出门去，我辈岂是蓬蒿人——