Question

我有一个名为programme的组件，其中包含另一个名为question的组件。

在question内，我有一个计时器组件（https://github.com/xkeshi/vue-countdown），它会倒计时，然后在达到零时触发一个事件。

我需要在programme组件中收听此事件。我怎么能这样做？

要提供一些上下文，programme播放多个视频，然后向用户询问一个问题，用户有 n 秒回答，如果他们无法回答上一个视频播放。这个逻辑发生在programme中，因此我需要在programme中访问该事件。

作为参考，这里是倒数计时器：

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

Answer 1

如果您不想按照上面的建议实现事件总线（我可能会这样做），有一种方法可以做到这一点。儿童可以$emit直接父母可以听到的事件，而不是更多。因此，如果我正确理解您，并且您拥有以下组件结构，

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

您要求在expired组件的onCountdownEnd函数中发出名为<countdown />的事件的方法，如下所示

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

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

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

最后在上级父programme中，您还有一个事件的监听器，我再一次称之为expired，它在＆＃39时运行一个功能; s触发，如下所示

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

我希望这有帮助并且有意义。如果您有任何疑问，请随时留言！

Answer 2

如果您为应用程序和组件提供了最少的代码，那将更容易理解。

如果我理解正确，那么你需要将onCountdownEnd方法添加到你的父组件，它可以这样做：

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

我建议使用Vuex存储应用程序的状态，这样可以免除您的麻烦。

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

2 个答案: