关于vue中的slot和slot-scope

slot简言之就是插槽的意思，一般规定了一个显示的模板(规定html+css)，这个模板写在父组件里(父组件里没有模板则不显示),至于显示位置等则是由子组件决定

也就是说怎么显示是由父组件决定，在哪显示则由子组件决定

在父组件中，各插槽的内容模板要写在子组件标签内部。

默认插槽/匿名插槽/单个插槽

默认插槽只能有一个，即在父组件里不定义slot的那个模板，默认插槽渲染在子组件内部不定义name的slot标签上。

具名插槽

在子组件内部可以为name插槽命名，被命名的插槽叫具名插槽，不同的具名插槽显示不同的模板

在父组件内可以通过给模板的最外层标签上添加slot属性来确认模板对应的插槽

  

    
    
  
  

    
    
  
  

    
    
  
  




  
  
  
  
A paragraph for the main content.
  
And another one.
    
      
  




  

    
Here might be a page title
  
  
 
    
A paragraph for the main content.
    
And another one.
  
  

    
Here's some contact info
  

作用域插槽/带数据的插槽

vue 2.1.0+ 新增了一个叫作用域插槽的东西，它允许我们在插槽上面定义数据。

作用域插槽主要是为了解决那些插槽的数据在子组件内(可由父组件传入)，但是样式需要父组件确定的问题。

在子组件中的slot标签上，通过v-bind指令来绑定对应的作用域props  

在父组件内部使用时通过slot-scope来获取对应的props对象。

使用实例如下

 export default {
    data: function(){
      return {
        data: [{name:'zhangsan',sex:"男"},{name:'lisi',sex:"男"},{name:'ww',sex:"女"},{name:'zl',sex:"男"},{name:'lq',sex:"男"}]
      }
    }
}