插槽的使用

使用情形：

当子组件除了 template 中内容，还需要再展示父组件传过来的内容时。（当子组件有一部分内容是根据父组件传递过来的 dom 进行显示时，就使用到了插槽）

通过插槽可以更方便的向子组件传递 dom 元素。

  

    
      
word
    
  
  

同时，还可以设置插槽的默认值，当父组件不传递 dom 元素时，显示 slot 默认值。

具名插槽：

要实传入的dom 元素按照需求排列。当使用以下方法时，肯定不适合。

  

    
      
header
      
footer
    
  
  

页面显示如下：

此时会将传进来的 dom 元素按照整体进行渲染。
解决方法：使用具名插槽

   

    
      
header
      
footer
    
  
  

在需要传进来的 dom 元素上给相应的节点添加不同的 slot 属性名，然后在子组件中使用 slot 标签并定义对应的 name 属性进行绑定。

具名插槽也可以使用默认值：

  

    
      
footer
    
  
  

插槽只能有一个，而具名插槽可以有多个

作用域插槽

父组件调用子组件时，给子组件传了一个插槽，子组件可以向父组件的插槽里传数据，这个插槽叫做作用域插槽，必须是包含在 template 中，同时申明从子组件接收的数据都放在哪 slot-scope="" ，同时还要告诉子组件模板的信息。

上述代码详解：

适应场景：

当子组件做循环，或者子组件某一部分 dom 结构需要从外边传递进来时。