将事件从组件发送到路由器视图 - 糟糕的代码气味

Question

我正在尝试使用 Vue Router，但我闻到了一股难闻的气味。需要与社区核实，看看我是否做对了。

在 Vue Router 之前，我有一个组件作为父组件从其子组件接收事件并更新我的主应用程序数据属性：

<number-pad v-on:button-click="updateTotal($event)"></number-pad>

不要担心细节，但它正在起作用。

当我将它移动到 Vue Router 时，它现在看起来像这样......

const pageOne = {
    name: "page-one",
    template: `
    <div>
        <number-pad v-on:button-click="updateTotal($event)"></number-pad>
    </div>  `
};

...在我的 HTML 中包含以下内容：

<router-view></router-view>

还有很多我遗漏了，但你明白了要点。

无论如何，这将呈现得很好并更新组件的内部，当然，但指令不会再与主数据属性通信，除非我调整一些代码以将数据向上发送到<router-view>组件的更高级别：

<router-view v-on:button-click="updateTotal($event)"></router-view>

它现在可以工作了（为了简洁起见，我没有写出其他代码调整）。

换句话说，当谈到组件关系时，我从 Vue Router 之前的父 -> 子关系到之后的祖父 -> 父 -> 子关系。

<router-view>为了与主数据属性通信，我是否真的必须将所有绑定和指令复制到这个新祖父母？

这对我来说闻起来很糟糕，也是一个巨大的痛苦。

我能做些什么来改善这种情况？答案是：Vuex！或者是答案：不，你是笨蛋，你忽略了一些简单的事情。

谢谢。

Answer 1

Vuex 是答案之一，但你也可以定义一个事件总线，即：

/src/event-bus.js

import Vue from 'vue'
export const EventBus = new Vue()

将它导入到正在发射的组件中：

import EventBus from '@/event-bus'

你会发出这样的事件：

EventBus.$emit('button-click', payload)

现在在接收事件的组件中导入 EventBus，并在挂载的钩子中添加一个侦听器：

mounted() {
  EventBus.$on('button-click', payload => {
    // handle event
  })
}

这适用于应用程序范围。