使用Vue 2中的可重用组件与vue路由器配合使用

当我尝试使用单击事件在嵌套路由器视图中定位子组件时，我似乎做错了什么 .

Current situation: 我有一个组件和组件二 . 两者都有一个名为dialog的子组件 .

通过父组件仪表板中的路由器视图加载组件1和组件2 . 每个视图都有一个按钮，用于显示其子组件“模态” .

该按钮似乎在页面加载上加载的视图上正常工作 . 但是一旦我切换路由，showModal函数就不知道要从哪个视图定位的对话框元素 .

我认为组件会在切换路线时被破坏并重建，但显然不是 .

这是我的代码，我希望有人能够提供帮助：

App

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)
/**
 * First we will load all of this project's JavaScript dependencies which
 * include Vue and Vue Resource. This gives a great starting point for
 * building robust, powerful web applications using Vue and Laravel.
 */

require('./bootstrap')

/**
 * Next, we will create a fresh Vue application instance and attach it to
 * the body of the page. From here, you may begin adding components to
 * the application, or feel free to tweak this setup for your needs.
 */

Vue.component('vuetest', require('./components/vuetest.vue'))

const Dashboard = require('./components/dashboard.vue')
const FirstRoute = require('./components/firstroute.vue')
const Second = require('./components/secondroute.vue')

const routes = [
    {
        path: '/dashboard',
        component: Dashboard,
        children: [
            {
                path: 'firstview',
                name: 'firstview',
                canReuse: false,
                component: FirstRoute
            },
            {
                path: 'secondview',
                name: 'secondview',
                canReuse: false,
                component: Second
            }
        ]
    }
]

const router = new VueRouter({
    routes // short for routes: routes
})

window.EventHub = new Vue()

const app = new Vue({
    el: '#app',
    router
});

Vuetest

<template>
    <div>
        <h1>Vue Test</h1>
        <router-view></router-view>
    </div>
</template>

<script>
    export default {
        created() {

        },
        mounted() {
            console.log('Component ready.')
        }
    }
</script>

Dashboard Route

<template>
    <div>
        <h1>Dashboard</h1>
        <navigation></navigation>
        <router-view></router-view>
    </div>
</template>
<script>
    Vue.component('navigation', require('./navigation.vue'))
</script>

Navigation

<template>
    <div>
        <router-link :to="{ name: 'firstview' }">first</router-link>
        <router-link :to="{ name: 'secondview' }">second</router-link>
    </div>
</template>

First Route

<template>
    <div class="firstroute">
        <h1>First Route</h1>
        <button class="showmodal" v-on:click="showModal">Showmodal</button>
        <modal></modal>
    </div>
</template>
<script>
    export default {
        methods: {
            showModal: function () {
                EventHub.$emit('showModal')
            }
        }
    }
    Vue.component('modal', require('./modal.vue'));
</script>

Second Route

<template>
    <div class="secondroute">
        <h1>Second Route</h1>
        <button class="showmodal" v-on:click="showModal">Showmodal</button>
        <modal></modal>
    </div>
</template>
<script>
    export default {
        methods: {
            showModal: function () {
                EventHub.$emit('showModal')
            }
        }
    }
    Vue.component('modal', require('./modal.vue'));
</script>

Modal

<template>
    <div class="dialog hidden">
        Dialog
    </div>
</template>
<style>
    .hidden {
        display: none;
    }
</style>
<script>
    export default{
        created() {
            EventHub.$on('showModal', this.showModal);
        },
        methods: {
            showModal: function() {
                document.querySelector('.dialog').classList.toggle('hidden');
            }
        }
    }
</script>

我非常感谢任何帮助 .