Javascript 侦听从VueJs中的父组件激发的事件

其概念是当用户单击集合（父组件）中的特定图像时，在模式（子组件）中显示图像。这是我的代码：

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（父级）

导出默认值{
计算：{
照片（）{
返回此。$store.getters['photos/imgData']；
}
},
方法：{
国际模式（id）{
此.$emit（'imgClicked'，id）；
这个.$router.push（{name:'oemotal'，参数：{id:id}}）
}
}
}

和OeModal.vue（儿童）

#摄影
#旅行
#冬天
Lorem ipsum dolor，坐在amet Concertetur Adipising Elite的位子上。动物小体的蓄积体与透明质体相似，是一种暂时性的软骨病？奎斯，自由主义者的堕落与堕落
这是一个很好的例子！《海底总动员练习》中的铜镁合金

导出默认值{
数据（）{
返回{
}
},
创建（）{
此.$parent.$on（'imgClicked'，此.$modal.show（'testModal'））；
},
观察：{
“$route”：函数（到，从）{
//这个.modal.show（'testModal'）；
},
},
计算：{
img（）{
返回此.$store.getters['photos/imgData'].find（i=>i.id==此.$route.params.id）；
}
},
方法：{
显示（）{
这个.modal.show（'testModal'）；
},
隐藏（）{
这是.$modal.hide（'hello-world'）；
}
}
}

如您所见，我已从父组件设置了一个事件

imgModal

，以便在每次单击图像时触发它。我试着从OeModal（子组件）收听事件并在那里做一些工作，但我就是无法让它工作。尝试时，

this.$parent.$on（'imgClicked'，this.$modal.show（'testModal'）），我在控制台中遇到以下错误：

[Vue warn]：事件处理程序中“imgClicked”的错误：“TypeError:无法读取未定义的属性'apply'”
看起来您在创建组件并注册侦听事件之前发出事件。因此，与此相反：

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

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

试试这个：

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

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

或者可能：

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

此外，注册事件处理程序的方式也不正确。与此相反：

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

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

试试这个：

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

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

你的答案就是这个问题的确切答案。继续努力！