在 VueJs 中监听父组件触发的事件

Question

这个概念是当用户点击 Collection（父组件）中的特定图像时，在 Modal（子组件）中显示图像。这是我的代码：

routes.js

import Home from './components/Home';
import About from './components/About';
import Contact from './components/Contact';
import Explore from './components/Explore';
import OeModal from './components/OeModal';

export default {
    mode: 'history',

    routes: [
        {
            path: '/',
            component: Home
        },
        {
            path: '/about',
            component: About
        },
        {
            path: '/contact',
            component: Contact
        },
        {
            path: '/explore/',
            component: Explore,

            children: [
                { path: ':id', component: OeModal, name: 'OeModal', props: true }
              ]
        },
    ]
};

Explore.vue（父级）

<template>
    <div class="" id="rbGallery">

        <div v-masonry transition-duration="0.3s" item-selector=".item"  origin-top="true" class="flex">
            <div v-masonry-tile class="item w-1/4" v-for="(img, index) in photos">
                <a :href="'/explore/' + img.id" @click.prevent="imgModal(img.id)"><img class="" :src="img.url" alt="Card image cap"></a>
            </div>
        </div>

        <router-view></router-view>

    </div>
</template>

<script>

    export default {

        computed: {
            photos() {
                return this.$store.getters['photos/imgData'];
            }
        },

        methods: {

            imgModal(id) {
                this.$emit('imgClicked', id);

                this.$router.push({ name: 'OeModal', params: {id: id}})
            }
        }
    }
</script>

和 OeModal.vue（子）

<template>
    <div>

        <oe-modal name="testModal" width="80%" height="auto" :scrollable="true">

            <div class="px-16 py-8">

                <img class="modalImg" :src="img.url" alt="Sunset in the mountains">

                <div class="text-center m-auto">
                    <span class="inline-block bg-grey-lighter rounded-full px-3 py-1 text-sm font-semibold text-grey-darker mr-2">#photography</span>
                    <span class="inline-block bg-grey-lighter rounded-full px-3 py-1 text-sm font-semibold text-grey-darker mr-2">#travel</span>
                    <span class="inline-block bg-grey-lighter rounded-full px-3 py-1 text-sm font-semibold text-grey-darker">#winter</span>
                </div>

                <div>
                    <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Accusantium animi hic obcaecati neque dolores praesentium perspiciatis sit ea similique, quae tempora in saepe mollitia odio iusto deleniti harum? Quis, in reiciendis fugiat cum corrupti libero m
                        inus sequi asperiores iusto provident fugit tenetur repellendus nisi! Cupiditate magni unde obcaecati nemo exercitationem.</p>
                </div>
            </div>

        </oe-modal>

    </div>
</template>

<script>
    export default {

        data() {
            return {
            }
        },

        created() {
            this.$parent.$on('imgClicked', this.$modal.show('testModal'));
        },

        watch: {
            '$route': function(to, from) {
                // this.$modal.show('testModal');
            },
        },

        computed: {
            img() {
                return this.$store.getters['photos/imgData'].find(i => i.id == this.$route.params.id);
            }
        },

        methods: {
            show () {
                this.$modal.show('testModal');
            },
            hide () {
                this.$modal.hide('hello-world');
            }
        }
    }
</script>

如您所见，我从父组件设置了一个事件imgModal，以便每次单击图像时都会触发它。我试图从 OeModal（子组件）监听事件并在那里做一些工作，但我就是无法让它工作。尝试this.$parent.$on('imgClicked', this.$modal.show('testModal'));时，控制台出现以下错误：

[Vue warn]: Error in event handler for "imgClicked": "TypeError: Cannot read property 'apply' of undefined"

Answer 1

看起来您在创建组件并注册以侦听事件之前发出事件。所以，而不是这个：

this.$emit('imgClicked', id);
this.$router.push({ name: 'OeModal', params: {id: id}})

试试这个：

this.$router.push({ name: 'OeModal', params: {id: id}})
this.$emit('imgClicked', id);

或可能：

this.$router.push({ name: 'OeModal', params: {id: id}})
this.$nextTick(function () {
    this.$emit('imgClicked', id);
});

另外，您注册事件处理程序的方式不正确。而不是这个：

this.$parent.$on('imgClicked', this.$modal.show('testModal'));

试试这个：

this.$parent.$on('imgClicked', function () { this.$modal.show('testModal'); });