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

比如现在调用两次 组件，给与不同的样式也是可以的。

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

DOCTYPE html>



    
    
    Demo31
    



    


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

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

            经过你的慎重考虑.最终选择了。
            
                 
            
        
    `
    })

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

插槽中使用子组件

插槽可以强大到直接使用子组件，接下来就做一个在插槽中使用子组件的小例子。

可以先声明一个最简单的子组件。

这个子组件叫做 project，也就是项目的意思，是为了展示我们选择技师后所作的项目。

app.component('project', {
    template: `项目是按摩足疗`
})

有了组件后直接可以在父组件的插槽中进行使用。

代码如下：

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

                小红，
            
    
     
小影
 
    `
})

浏览器中预览，可以看到确实插槽中是可以放置子组件的。

    
    
    Demo31
    



    


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

                        小红，
                    
            
             
小影
 
            `
    })

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

            经过你的慎重考虑.最终选择了。
            
                 
            
        
    `
    })

    app.component('project', {
        template: `项目是按摩足疗`
    })

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

插槽中使用动态数据

插槽中也可以直接使用动态数据，也就是我们常说的数据项，比如定义一个数据项，然后在插槽中使用，直接就可以使用了。

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

                {{jishi}},
            
    
     
小影
 
    `
})

这时候需要注意的是一个变量作用域的问题，比如我们子组件里也有一个数据项 jishi，然后给他赋值为小丽。

app.component('JiShi', {
    data() {
        return {
            jishi: '小丽'
        }
    },
    template: `
    

        经过你的慎重考虑.最终选择了。
        
             
        
    
`
})

这时候你会发现，浏览器中仍然显示的是晓红，这时候我们得出了一个结论，也是方便你记忆。

• 父模板里调用的数据属性，使用的都是父模板里的数据
• 子模板里调用的数据属性，使用的都是子模板里的数据

这节学习的内容就到这里了，这节算是一个初识，下节我们继续学习插槽相关的知识。

DOCTYPE html>



    
    
    Demo31
    



    


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

                        {{jishi}},
                    
            
             
小影
 
        `
    })

    app.component('JiShi', {
        data() {
            return {
                jishi: '小丽'
            }
        },
        template: `
        

            经过你的慎重考虑.最终选择了。
            
                 
            
        
    `
    })

    app.component('project', {
        template: `项目是按摩足疗`
    })

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