Vue 2.4 引入了一种使用以下方法轻松地将事件向上传递到层次结构的方法 vm.$listeners

来自https://vuejs.org/v2/api/#vm-listeners：

包含父作用域v-on事件侦听器（无.native修饰符）。这可以通过以下方式传递给内部组件v-on="$listeners"- 在创建透明包装器组件时很有用。

请参阅以下在模板v-on="$listeners"中的grand-child组件中使用的代码段child：

Vue.component('parent', {
  template:
    '<div>' +
      '<p>I am the parent. The value is {{displayValue}}.</p>' +
      '<child @toggle-value="toggleValue"></child>' +
    '</div>',
  data() {
    return {
      value: false
    }
  },
  methods: {
    toggleValue() { this.value = !this.value }
  },
  computed: {
    displayValue() {
      return (this.value ? "ON" : "OFF")
    }
  }
})

Vue.component('child', {
  template:
    '<div class="child">' +
      '<p>I am the child. I\'m just a wrapper providing some UI.</p>' +
      '<grand-child v-on="$listeners"></grand-child>' +
    '</div>'
})

Vue.component('grand-child', {
  template:
    '<div class="child">' +
      '<p>I am the grand-child: ' +
        '<button @click="emitToggleEvent">Toggle the value</button>' +
      '</p>' +
    '</div>',
  methods: {
    emitToggleEvent() { this.$emit('toggle-value') }
  }
})

new Vue({
  el: '#app'
})

.child {
  padding: 10px;
  border: 1px solid #ddd;
  background: #f0f0f0
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
  <parent></parent>
</div>

新答案（2018 年 11 月更新）

我发现我们实际上可以通过利用$parent大子组件中的属性来做到这一点：

this.$parent.$emit("submit", {somekey: somevalue})

更干净，更简单。

Vue 社区普遍倾向于使用 Vuex 来解决此类问题。对 Vuex 状态进行了更改，DOM 表示只是从中流出，在许多情况下消除了对事件的需要。

除此之外，重新发送可能是下一个最佳选择，最后您可能会选择使用事件总线，如该问题的另一个高票答案中所述。

下面的答案是我对这个问题的原始答案，不是我现在会采用的方法，因为有了更多的 Vue 经验。

在这种情况下，我可能不同意 Vue 的设计选择并求助于 DOM。

在grand-child,

methods: {
    doEvent() { 
        try {
            this.$el.dispatchEvent(new Event("eventtriggered"));
        } catch (e) {
            // handle IE not supporting Event constructor
            var evt = document.createEvent("Event");
            evt.initEvent("eventtriggered", true, false);
            this.$el.dispatchEvent(evt);
        }
    }
}

并且在parent，

mounted(){
    this.$el.addEventListener("eventtriggered", () => this.performAction())
}

否则，是的，您必须重新发射或使用总线。

注意：我在doEvent方法中添加了处理IE的代码；该代码可以以可重用的方式提取。

是的，您是正确的事件只会从孩子传到父母。他们不会走得更远，例如从孩子到祖父母。

Vue 文档（简要）在非父子通信部分解决了这种情况。

一般的想法是在祖父组件中创建一个空Vue组件，该组件通过 props 从祖父组件向下传递给子组件和孙组件。然后祖父母侦听事件，孙辈在该“事件总线”上发出事件。

某些应用程序使用全局事件总线而不是每个组件的事件总线。使用全局事件总线意味着您需要具有唯一的事件名称或命名空间，以便事件不会在不同组件之间发生冲突。

下面是一个如何实现简单全局事件总线的示例。

如果你想灵活地简单地向所有父母和他们的父母递归地广播一个事件到根，你可以这样做：

let vm = this.$parent

while(vm) {
    vm.$emit('submit')
    vm = vm.$parent
}