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>

步骤组件方法：

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

我在步骤模板中使用v-on:click="next"调用此方法（在＆＃39; next＆＃39;按钮上）从console.log中，我看到click事件已执行，$ emit调用不会触发任何错误，因此此时似乎工作正常。

摘要组件

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

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

在Summary组件中，知道在单击它时该怎么做，我尝试通过在模板中使用此事件来接收此事件：

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

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

我该如何解决这个问题？

Answer 1

我认为您正在寻找event bus 以下是官方文档中的一些片段：

var bus = new Vue()

// in component A's method
bus.$emit('id-selected', 1)

// in component B's created hook
bus.$on('id-selected', function (id) {
  // ...
})

link：https://vuejs.org/v2/guide/components.html#Non-Parent-Child-Communication

以下是相同的博客：https://alligator.io/vuejs/global-event-bus/

Answer 2

一个简单的解决方案是使用select min(start_dt) as startdate, max(end_dt) as enddate, type from ( with t(id, start_dt, end_dt,type) as ( select 1, date'2019-01-01', date'2019-02-21', 'cross' from dual union all select 1, date'2019-02-22', date'2019-06-05', 'cross' from dual union all select 1, date'2019-06-06', date'2019-08-31', 'cross' from dual union all select 1, date'2019-09-01', date'2019-10-03', 'AAAA' from dual union all select 1, date'2019-09-04', date'2019-10-04', 'cross' from dual union all select 1, date'2019-10-05', date'2019-10-06', 'AAAA' from dual union all select 1, date'2019-10-07', date'2019-10-10', 'AAAA' from dual union all select 1, date'2019-10-11', date'2019-12-31', 'cross' from dual ) select type, row_number() over (partition by id, type order by end_dt) as rn1, row_number() over (partition by id order by end_dt) as rn2, start_dt, end_dt from t ) tt group by type, rn1 - rn2 order by enddate; STARTDATE ENDDATE TYPE --------- --------- ----- 01-JAN-19 31-AUG-19 cross 01-SEP-19 03-OCT-19 AAAA 04-SEP-19 04-OCT-19 cross 05-OCT-19 10-OCT-19 AAAA 11-OCT-19 31-DEC-19 cross：

$root

在Vue中 - 如何触发广播以在不同的控件中拾取事件？

步骤组件模板：

步骤组件方法：

摘要组件

2 个答案: