作用域插槽

作用域插槽增加了组件的抽象能力

比如我定义了一个my-list组件，在没有使用作用域插槽的时候，我可能会这么写my-list的模板：

        

            
{{ title }}
            

                
            
        

当然my-list组件还有一个属性props

props:['title']

那么我在使用my-list的时候，可能会这么写：

首先我得有一个vue实例（这个my-list我写做demo26的局部组件）

var demo26 = new Vue({
    el:"#demo26",
    components:{
        'my-list':{
            template:'#my-list',
            props:['title']
        }
    },
    data(){
        return{
            shapes:[
                { name:'正方形', sides:4},
                { name:'六边形', sides:6},
                { name:'三角形', sides:3}
            ],
            colors: [ 
                { name: '黄色', hex: '#f4d03f' }, 
                { name: '绿色', hex: '#229954' }, 
                { name: '紫色', hex: '#9b59b6' } 
            ]
        }
    }
})

然后html长这样

    

        
            

                {{shape.name}}（{{shape.sides}}条边）
            
        
        
            

                
{{color.name}}
            
        
    

结果没有什么问题，但是，我们可以使用作用域插槽进一步增加组件的抽象能力，比如我在html中使用了v-for，但是现在我想把v-for写到组件里面，这个时候就有一个问题，我怎么把v-for需要的数据传到组件里面去，那么这个时候作用域组件就可以解决这个问题。

        

            
{{title}}
            

                
            
        

    

        

        
        
            
{{shape.name}}（{{shape.sides}}条边）
        

        
            

                
{{color.name}}
            
        
            
    

var demo26_1 = new Vue({
    el:"#demo26_1",
    components:{
        'my-list':{
            template:"#my-list1",
            props:['title','items']
        }
    },
    data(){
        return{
            // title:'形状',
            shapes:[
                { name:'正方形', sides:4},
                { name:'六边形', sides:6},
                { name:'三角形', sides:3}
            ],
            colors: [ 
                { name: '黄色', hex: '#f4d03f' }, 
                { name: '绿色', hex: '#229954' }, 
                { name: '紫色', hex: '#9b59b6' } 
            ]
        }
    }

})

参考：https://www.w3cplus.com/vue/vue-js-scoped-slots.html