vue2的事件中心问题

我有2个父组件都引用了同一个子组件,然后子组件有点击事件通知父组件修改数据,我用的是eventHub来创建一个事件中心,用它来在子组件$emit,然后在父组件中$on接收,然后调用回调,现在的问题是不同父组件中子组件$emit的方法,好像2个父组件都能接收?因为当我只使用一个父组件时没有报错,2个父组件时就报错了,说的有点绕,我的大概意思就是如何让父组件区分这是它下面的子组件冒泡上来的方法,代码如下:

子组件的$emit:
select(type,event) {
    if (!event._constructed) {
        return;
    }
    Hub.$emit('ratingType.select',type);
},
toggleContent() {
    if (!event._constructed) {
        return;
    }
    Hub.$emit('content.toggle',!this.onlyContent);
}
父组件监听:(2个父组件都是监听的同样的点击事件)

    Hub.$on('ratingType.select',type => {
        this.selectType = type;
        this.$nextTick(() => {
            this.scroll.refresh();
        });
    });
    Hub.$on('content.toggle',content => {
        this.onlyContent = content;
        this.$nextTick(() => {
            this.scroll.refresh();
        });
    });
阅读 4.6k
2 个回答

在父组件created内创建eventHub 然后绑定到子组件的props里进行交互

props down, events up
所以你可以在父组件写method,比如叫dvt
然后Hub.$emit('dvt')
在dvt中做你想做的事

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题