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等
posted @ 2019-08-30 13:47  手指乐  阅读(2096)  评论(0编辑  收藏  举报