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等