在VUE 2中使用可重复使用的组件与VUE路由器合并

Question

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

当前情况：我有一个组件和组件两个。两者都有一个称为对话框的子组件。

组件一和两个正在通过父组件仪表板中的路由器视图加载。每个视图都有一个按钮显示他们的孩子组件"模态"。

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

我认为这些组件会在切换路线时被破坏和重建，但显然不是。

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

应用

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>

仪表板路由

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

导航

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

第一路线

<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>

第二路线

<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>

模态

<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>

我真的很感谢任何帮助。

Answer 1

微小的建议

'：class'指令代替本机代码：

document.querySelector('.dialog').classList.toggle('hidden');

组件：

import Modal from './modal' 
export default {
  ...
  components:
    Modal
  }
  ...
}

而不是

Vue.component('modal', require('./modal.vue'));

..也是Vuex的好点

附加：

https://github.com/vuejs/vue-devtools

https://jsfiddle.net/ulaj738k/2/

Answer 2

事实证明问题是我称为querySelector方法的那一刻。

将.dialog元素分配给mounted()中的const解决了我的问题。