Vue子组件和根组件的关系

• 代码：

<script type="text/javascript">
    const Foo = Vue.extend({
        template: `<div id="testzy">
            <div @click="change">test</div>
        </div>`,
        mounted: function() {
            debugger;
        },
        methods: {
            change() {
                debugger;
            },
        }
    });


    const routes = [{
        path: '/foo/:id',
        component: Foo
    }]


    const router = new VueRouter({
        routes // （缩写）相当于 routes: routes
    })

    const app = new Vue({
        data: {
            message: 'father',
            msg1: "hello",
            show: true
        },
        router, // （缩写）相当于 router: router
        mounted: function() {
            debugger;
            alert(this.$data.message);
        },

    }).$mount('#app')
</script>

• app是Vue对象，也是一个组件，是最上层的根组件，Foo是VueComponent，是根组件里的子组件
• 运行起来后，app对象里面会有一个叫children的数组，这个数组里面包含了Foo
• 运行起来后，app和Foo里面都会有一些内置的属性和方法，比如$data,$el,$router等