组件的嵌套 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <!-- 
            1.组件的嵌套（school中包含student标签）
            
            2.在app组件中使用其他组件
         -->
        <script src="vue.js"></script>
    </head>
    <body>
        <div id="root">
            <!-- 使用组件 -->
            <app></app>
        </div>
        <script>
            Vue.config.productionTip=false
            //定义student组件
            const student =Vue.extend({
                name:'student',
                template:
                `
                <div>
                    <h3>学生名称：{{name}}</h3>
                </div>
                `,
                data(){
                    return{
                        name:'wei'
                    }
                }
            })
            
            //定义school组件
            const school =Vue.extend({
                template:
                `
                <div>
                    <h3>学校名称：{{name}}</h3>
                    <student></student>
                </div>
                `,
                data(){
                    return{
                        name:'轩辕学校'
                    }
                },
                //把嵌套的子级放到school组件下（注册）
                components:{
                    student
                }
            })
            
            //定义hello组件
            const hello = Vue.extend({
                template:
                `
                <div>
                    <h3>班干部名称：{{name}}</h3>
                </div>
                `,
                data(){
                    return{
                        name:'shi'
                    }
                }    
            })
            
            //定义app组件
            const app = Vue.extend({
                template:
                `
                <div>
                    <school></school>
                    <hello></hello>
                </div> 
                `,
                components:{
                    school,
                    hello
                }
            })
            
            new Vue({
                el:'#root',
                //注册组件
                components:{
                    app
                }
            })
        </script>
    </body>
</html>

 

posted on 2022-12-14 21:26  爱前端的小魏  阅读(54)  评论(0)    收藏  举报

导航