插槽（slot）

插槽，也就是slot，是组件的一块HTML模板，一个slot最核心的两个问题是显示不显示和怎样显示。

插槽，子组件中的提供给父组件使用的一个占位符，用 表示，父组件可以在这个占位符中填充任何模板代码，如 HTML、组件等，填充的内容会替换子组件的标签。

单个slot

单个插槽，别名默认插槽、匿名插槽，不用设置name属性。

具名slot

给插槽起一个名字，插槽加了name属性，就变成了具名插槽。具名插槽可以在一个组件中出现N次，出现在不同的位置。

作用域slot

vue2.5版本中slot-scope取代了scope，来实现作用域插槽，主要用在组件调用中，具体在template标签上面使用slot-scope来获取插槽slot上面的属性值，获取值的为一个对象，slot-scope=”它可以取任意字符串”，在element-ui的组件中经常看到。

案例代码

    
    
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.14/vue.js"></script>



  
  
    12345
  
  
  
    12345
    56789
  
  
  
    
    
  


<script type="text/javascript">
  var app = new Vue({
    el: '#app',
    data: {
      data: [{
        name: '张三',
        age: '39',
        sex: '男'
      }]
    },
    methods: {
      handFirst: function () {
        console.log("It is the parent's method");
      }
    },
    components: {
      // 单个slot
      children1: {
        template: "单个插槽"
      },
      // 具名slot
      children2: {
        template: "具名插槽，"
      },
      // 作用域slot
      'tb-list': {
        template:
            `

                

                    
                
            
`,
        // 获取值
        props: ['data']
      }
    }
  });
</script>