Vue路由器链接和自定义事件答案

【问题标题】：Vue router-link and custom eventVue路由器链接和自定义事件
【发布时间】：2019-04-11 11:03:59
【问题描述】：

我正在尝试在 vue 中的路由器链接上创建自定义事件，但它似乎不起作用。我想做这样的事情-

父母-

<Home @customEvent="myEventHandler" />

脚本-

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

孩子

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 创建的组件中侦听自定义事件？

提前谢谢...

【问题讨论】：

【解决方案1】：

这是可能的。你只能$emit事件从孩子到父母，你不能$emit两个不同路由器之间的事件

从子级向父级发送事件

不能在 2 个不同的路由之间发出事件：

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

【讨论】：