vuejs2 - 在 Vue 中 - 如何触发广播以在不同的控件中接收事件？

Question

我有一个步骤组件，我需要在单击下一步按钮时在我的步骤组件中触发一个事件。

此事件应由代表当前步骤中页面内容的不同组件拾取。

这是我试过的:

步骤组件模板:

<template>
  <div class="steps">
    <div class="steps-content">
      <section class="steps-panel" v-for="(stepPage, index) in steps">
        <header class="posA wrap pTs">{{$t(title)}}</header>
        <component :is="stepPage">
           <!-- Summary component is injected here -->
        </component>
      </section>
    </div>
    <div role="navigation">
      <ol class="fixed nav nav--block steps-nav w100">
        <li class="steps-label txtCap" v-for="(stepPage, index) in steps">
          {{$t(stepPage.name)}}
        </li>
      </ol>
      <button class="steps-button" type="button">
        <i class="pf pf-arrow-left"></i>
        <span class="steps-button-label">{{$tc('previous')}}</span>
      </button>
      <button class="steps-button" type="button" v-on:click="next">
        <span class="steps-button-label">{{$tc('next')}}</span>
        <i class="pf pf-arrow-right"></i>
      </button>
    </div>
  </div>
</template>

Steps组件方法:

methods: {
  next(event) {
    console.log('emit stepnext')
    this.$emit('stepnext')
  }
}

我在步骤模板中用 v-on:click="next" 调用它(在“下一步”按钮上)从 console.log 中，我看到执行了 click 事件，并且 $emit 调用没有触发任何错误，因此此时似乎工作正常。

摘要组件

摘要组件是“步骤”中的组件之一，由步骤模板中的此条目加载:

<component :is="stepPage"></component>

在 Summary 组件中知道单击它时要做什么，我尝试通过在模板中包含此事件来获取此事件:

<div class="wrap" v-on:stepnext="stepfinish">
 ... content ...
</div>

... 以及摘要组件中名为 stepfinish 的方法执行操作，但似乎发出的事件从未到达我的摘要组件。

我该如何解决这个问题？

Answer 1

使用 $root 时的一个简单解决方案:

// trigger
this.$root.$emit('my-event');

// listen
this.$root.$on('my-event');