Как я могу передать данные обратно в родительский компонент в VueJS?

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 выше,при запуске запускается функция, как показано ниже

// 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 для хранения состояния вашего приложения, это избавит вас от головной боли.