Vue router-link 和自定义事件

Question

我正在尝试在 vue 中的 router-link 上创建一个自定义事件，但它似乎不起作用。我想做这样的事情-

parent-

<Home @customEvent="myEventHandler" />

脚本-

export default {
methods: {
    myEventHandler() {
        console.log('yay')
    }
}

child

export default {
...
mounted() {
    axios.get('api/link').then(res => {
        this.posts = res.data;
        this.$emit('customEvent')
    }
}

用常规组件创建 yay 的日志效果很好，但是当我尝试做这样的事情时-

<router-link to='/home' @customEvent="myEventHandler">Home</router-link>

好像不行。您如何从使用 router-link 创建的组件中监听自定义事件？

提前致谢...

Answer 1

有可能。您只能 $emit 从子级到父级的事件，不能 $emit 2 个不同路由器之间的事件

Emit event from children to parent

Can't emit event between 2 different routes:

要解决此问题，您可以为组件 A 和组件 B 创建一个包装器组件，然后使用 router-view 接收事件

Vue router-link and custom event