我有一个步骤组件,我需要在单击下一步按钮时在我的步骤组件中触发一个事件。
此事件应由代表当前步骤中页面内容的不同组件拾取。
这是我试过的:
步骤组件模板:
<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
的方法执行操作,但似乎发出的事件从未到达我的摘要组件。
我该如何解决这个问题?
最佳答案
使用 $root
时的一个简单解决方案:
// trigger
this.$root.$emit('my-event');
// listen
this.$root.$on('my-event');
关于vuejs2 - 在 Vue 中 - 如何触发广播以在不同的控件中接收事件?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43047328/