Vue子组件和根组件的关系

Z时代
2024-01-10
分类：综合

vue

代码：

<script type="text/javascript">
    const Foo = Vue.extend({
        template: `<div >
            <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>