33 具名插槽的简写方法、作用域插槽、简化作用域插槽写法

这节先讲一下具名插槽的简写方法，算是对上节课遗漏知识点的补充。

然后再讲一下本节的重点插槽作用域，这个还是比较难理解的，所以如果你一遍学不懂。没关系，敲两遍代码，结合文章，一定可以有一个深刻的理解。

先来看具名插槽的简写方法。

在父模板中确定插槽位置时，使用了 v-slot:one 这种方法，其实这个语法可以简写成 #one。

这时候的代码就变成了下面的样子。

const app = Vue.createApp({
    template: ` 
	    欢迎光临大宝剑-请选择您的技师
	    
	        1.女宾一位，请上三楼。
	        3.顾客选择了全身SPA。
	    
	`
})

修改后，可以打开浏览器，进行预览，发现也可以出现正确的结果。 学完具名插槽的简写方法后，我们就可以学习本文的重点了作用域插槽。

DOCTYPE html>



    
    
    Demo33
    



    


    const app = Vue.createApp({
        template: ` 
            欢迎光临大宝剑-请选择您的技师
            
                
1.女宾一位，请上三楼。
                
3.顾客选择了全身SPA。
            
        `
    })

    app.component('HongLangMan',{
        template:`
            

                    
                    
2.你选择了大脚为你服务
                    
            
        `
    })

    const vm = app.mount("#app")

其实作用域插槽主要解决的问题是，子组件中有插槽，也有变量，这些变量如何在父组件中进行使用。

先来看这样一个需求： 编写一个子组件，里边有小红、小影和小丽三个名字变量，然后在子组件中用循环的形式输出出来。

DOCTYPE html>



    
    
    Demo33
    



    


    const app = Vue.createApp({
        template: `
            欢迎光临大宝剑-请选择您的技师
            
        `
    })
    app.component('list',{
        data() {
            return {
                list:['小红', '小影', '小丽']
            }
        },
        template:`
            

                
{{item}}
            
        `
    })

    const vm = app.mount("#app")

上面的代码，编写了一个子组件 list，然后在 list 组件里，声明了一个 list 的数组数据项。

数据项里有三个值小红、小影和小丽。

在模板中试用v-for的形式，进行循环。

写完这段代码后，可以到浏览器里调试一下，看看可以正常运行吗？ 如果一切正常，应该在页面上显示出循环的值了。

有了基础代码，就可以学习作用域插槽的内容了。

目前子组件里循环使用的是

template: `
    
            
    
`

const app = Vue.createApp({
    template: `  
        欢迎光临大宝剑-请选择您的技师
          
    `
})

DOCTYPE html>



    
    
    Demo33
    



    


    const app = Vue.createApp({
        template: `  
            欢迎光临大宝剑-请选择您的技师
              
        `
    })
    
    app.component('list',{
        data() {
            return {
                list:['小红', '小影', '小丽']
            }
        },
        template:`
            

                    
            
        `
    })

    const vm = app.mount("#app")

app.component('list',{
    data() {
        return {
            list:['小红', '小影', '小丽']
        }
    },
    template:`
        
            
        
    `
})

const app = Vue.createApp({
    template: `
        欢迎光临大宝剑-请选择您的技师
        
            {{props.item}}
        
    `
})

    {{props.item}}-{{props}} 

小红-{ "item": "小红" }
小影-{ "item": "小影" }
小丽-{ "item": "小丽" }

DOCTYPE html>



    
    
    Demo33
    



    


    const app = Vue.createApp({
        template: `
            欢迎光临大宝剑-请选择您的技师
            
                
{{props.item}}-{{props}}
 
            
        `
    })
    
    app.component('list',{
        data() {
            return {
                list:['小红', '小影', '小丽']
            }
        },
        template:`
            

                
            
        `
    })

    const vm = app.mount("#app")

const app = Vue.createApp({
    template: `  
        欢迎光临红浪漫-请选择您的技师
         
            {{item}} 
        
        `
})

DOCTYPE html>



    
    
    Demo33
    



    


    const app = Vue.createApp({
        template: `  
            欢迎光临红浪漫-请选择您的技师
             
                
{{item}}
 
            
            `
    })
    
    app.component('list',{
        data() {
            return {
                list:['小红', '小影', '小丽']
            }
        },
        template:`
            

                
            
        `
    })

    const vm = app.mount("#app")