Question

我正在尝试Vue Router，但闻起来有难闻的气味。需要与社区确认我是否做对了。

在Vue路由器之前，我有一个组件作为父组件，该组件从其子组件接收事件并更新我的主要app数据属性：

<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>

我要离开的还有很多，但是你要领了。

无论如何，这当然可以很好地渲染并更新组件的内部，但是该指令将不再与main数据属性进行通信，除非我调整一些代码以将数据再上一层到<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
  })
}

这适用于整个应用程序。

Answer 2

你可以简单地这样做：

<template>
  <div id="app">
    ...
    <router-view @child-event="handleChildEvent" />
    ...
  </div>
</template>

您可以了解更多here。

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

2 个答案: