26组件的嵌套

组件的嵌套

<!-- 层级越低的越先定义 -->
<div id="root">
    <!-- <app></app> -->
</div>
<script>
    Vue.config.productionTip = false;

    /*
        - Root
            - App
                - School
                    - Student
                - Hello
    */

    // 定义 student 组件

    const student = Vue.extend({
        template: `
            <div>
                <h3>{{name}}</h3>
                <h3>{{age}}</h3>
    		</div>
        `,
        data() {
            return {
                name: 'Redskaber',
                age: 18
            }
        },
    });

    // 定义 局部组件
    const school = Vue.extend({
        template: `
            <div>
                <h3>{{school}}</h3>
                <h3>{{address}}</h3>
                <student></student>
    		</div>
        `,
        data() {
            return {
                school: 'hniu.cn',
                address: 'hnwc',
            }
        },
        components: {
            student
        },
    });

    // 定义 Hello 组件
    const hello = Vue.extend({
        template: `
            <h2>{{msg}}</h2>
            `,
        data() {
            return {
                msg: 'Hello 组件管理的区域'
            }
        }
    });

    // 定义 app 组件
    const app = Vue.extend({
        template: `
            <div>
                <school></school>
                <hello></hello>
    		</div>
        `,
        components: {
            school, hello
        },
    });


    const vm = new Vue({
        el: '#root',
        template: `
            <app></app>
        `,
        components: {
            app
        },
    });

</script>