vue全家桶之插槽slot（九）

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

1、单个slot

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

    
        12345
    

    var app = new Vue({         el: '#app',         components: {             children1: {                 template: "单个插槽"             }         }     });

2、具名slot

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

    
        12345
        56789
    

    var app = new Vue({         el: '#app',         methods: {             tobeknow: function () {                 console.log("It is the parent's method");             }         },         components: {             children2: {//这个无返回值，不会继续派发                   template: "具名插槽，"             }         }     });

3、作用域slot

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

    
    
        
        
            
索引：{{JSON.stringify(scope)}}
            
索引：{{scope.$index}}
            
姓名:{{scope.row.name}}
            
年龄: {{scope.row.age}}
            
性别: {{scope.row.sex}}
        
    

    var app = new Vue({         el: '#app',         data: {             data: [{                 name: 'kongzhi1',                 age: '29',                 sex: 'man'             }]         },         components: {             // 作用域slot             'tb-list': {                 template:                     `

                                                                                                   

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

完整代码示例

    
    
    
    
        12345
    

    
        12345
        56789
    

    
    
        
        
            
索引：{{JSON.stringify(scope)}}
            
索引：{{scope.$index}}
            
姓名:{{scope.row.name}}
            
年龄: {{scope.row.age}}
            
性别: {{scope.row.sex}}
        
    

    var app = new Vue({         el: '#app',         data: {             data: [{                 name: 'kongzhi1',                 age: '29',                 sex: 'man'             }]         },         methods: {             tobeknow: function () {                 console.log("It is the parent's method");             }         },         components: {             // 单个slot             children1: {                 template: "单个插槽"             },             // 具名slot             children2: {                 template: "具名插槽，"             },             // 作用域slot             'tb-list': {                 template:                     `

                                                                                                   

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