Vue技术—组件嵌套

<div id="root">
    <app></app>
</div>
<script>
    /*创建students组件*/
    const students = Vue.extend({
        template: `
            <div>
                <h2>学生名称：{{name}}</h2>
                <h2>学生年龄：{{age}}</h2>
            </div>
        `,
        data(){
            return {
                name:'张三',
                age:18
            }
        }
    })
    /*创建school组件*/
    const school = Vue.extend({
        template:`
            <div>
              <h2>学校名称：{{name}}</h2>
              <h2>学校地址：{{address}}</h2>
              <students></students>
            </div>
        `,
        data(){
            return {
                name:'某某某学校',
                address:'天津'
            }
        },
        components:{
            students
        }
    })
    /*创建hell组件*/
    const hello = Vue.extend({
        template:`<h1>你好呀！{{msg}}</h1>`,
        data(){
            return{
                msg:'Vue'
            }
        }
    })
    /*创建app组件*/
    const app = Vue.extend({
        template:`
            <div>
                <hello></hello>
                <school></school>
            </div>
        `,
        components:{
            hello,
            school
        }
    })
    new Vue({
        el:'#root',
        components: {
            app
        }
    })
</script>