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

Question

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

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

我需要在 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

如果您不想按照上面的建议(我可能会这样做)实现事件总线，则有一种方法可以做到这一点。小 friend 可以$emit直接 parent 可以听到的事件，仅此而已。因此，如果我对您的理解正确，并且您具有以下组件结构，

<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上面，当它被触发时运行一个函数，如下所示

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

我希望这对您有所帮助并且有意义。有问题欢迎留言!