Javascript 如何将数据传递回VueJS中的父组件？

我有一个名为

程序

的组件，其中还有一个名为

问题

的组件

在

question

中，我有一个计时器组件（），它会倒计时，当它达到零时触发一个事件

我需要在

节目中收听此事件。我该怎么做

为了提供一点背景信息，
program
播放大量视频，然后向用户提问，用户有n秒的时间回答，如果他们无法回答，则播放之前的视频。此逻辑发生在
程序中
，因此我需要在
程序中访问事件

以下是倒计时计时器，仅供参考：

<countdown :time="timerAmount" v-show="isTimed" v-on:countdownend="onCountdownEnd">
    <template slot-scope="props">{{ props.minutes }}:{{ props.seconds }}</template>
</countdown>


{{props.minutes}}:{{props.seconds}
如果为应用程序和组件提供最低限度的代码，则更容易理解

如果我理解正确，那么您需要将onCountdownEnd方法添加到父组件中，方法如下：

<script>
  methods: {
    onCountdownEnd (data) {
      // do something
    }
  }
</script>


方法：{
onCountdownEnd（数据）{
//做点什么
}
}

我建议使用Vuex来存储应用程序的状态，这将使您免于头痛。
如果您不想实现上面建议的事件总线，有一种方法可以做到这一点（我可能会这么做）。孩子们可以
$emit
直接父母可以听到的事件，而不是更多。如果我理解正确，你有以下组件结构

<programme v-on:expired="setNewQuestion">
  <question v-on:expired="handleExpired">
     <countdown v-on:oncountdownend="onCountdownEnd" />
  </question>
</programme>

然后在它的父组件中，
question
，您将有一个侦听器等待您发出的名为
expired
的事件，并让它将
$emit
事件发送给它的父组件，如下所示

// in the <countdown> component
methods: {
  onCountdownEnd(somedata) {
    this.$emit("expired", somedata)
  }
}

// in the <question> component
methods: {
  handleExpired(somedata) {
    this.$emit("expired", somedata)
  }
}

// in the <programme> component
methods: {
  setNewQuestion(somedata) {
    // do something with the data or tick over to new question etc
  }
}

我希望这会有所帮助，并且有意义。如果您有任何问题，请随时留言
 通过使用全局事件总线是的，我建议使用事件总线！我最终通过使用全局事件总线实现了这一点：