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'); });

侦听从VueJs的父组件触发的事件

1 个答案: