Задать вопрос
@rafuber

Почему не получается передать пользовательское событие родительскому компоненту?

Есть компонент question и word.
Из компонента word мне надо передать событие testemit в компонент question.
В методе sendEmit компонента word console.dir отрабатывает.
Но метод testemit компонента question не отрабатывает.

Компонент вопроса
lessonInstance.component('question', {
  data() {
    return {

    }
},
  props: ['question', 'index',],
  emits: ['selected-answer', 'select-word'],
  computed: {
    isActive: function () {
      
    },
  },
  methods: {
   
    testemit: function() {
      console.dir('test msg')
    }
  },
  
  // playAudio(word.post_meta.audio),
  template: `<div  :class="question.elem_type">


                <div  v-if="question.elem_type == 'list'" 
                      v-for="word in question.words"
                      @click="$emit('testemit')"
                      class="word">

                      <word :word="word"></word>
                </div>

                <div v-if="question.elem_type == 'images'" 
                      v-for="word in question.words"
                      @click="selectWord()"
                      class="word">

                  <wordImg :image="word.post_meta.image"></wordImg>
                  <word :word="word"></word>
                  
                </div>

                

                <div v-if="question.elem_type == 'match'" class="matchContainer">
                      <match :question="question"></match>
                </div>
                
              </div>
              
              <div class="buttons-block">

                <div v-if="showCheckBlock" class="check">
                  <span @click="checkAnswer" >Проверить</span>
                </div>

                <div v-if="showNextBlock" class="next">
                  <div v-if="qResponse">
                    <p>верный ответ</p>
                  </div>
                  <div v-if="!qResponse">
                    <p>неверный ответ</p>
                    <p>Правильный ответ: {{ this.question.answer_true[0].post_title }}</p>
                  </div>
                  <span @click="$emit('selected-answer')">Далее</span>
                </div>
                
              </div>
              
              `
})

Компонент слова
lessonInstance.component('word', {
  props: ['word'],
  emits: ['testemit'],
  methods: {
    sendEmit: function() {
      console.dir('sendEmit enable')
      this.$emit('testemit')
    }
  },
  template: `<span @click="sendEmit">{{ word.post_title }}</span>`
})
  • Вопрос задан
  • 122 просмотра
Подписаться 1 Простой 2 комментария
Решения вопроса 1
0xD34F
@0xD34F Куратор тега Vue.js
Всё получается, всё передаётся.

метод testemit компонента question не отрабатывает

А должен? Нет, не должен - вы его нигде не вызываете. Как и не используете в качестве обработчика событий - вижу, что $emit('testemit') есть, а вот @testemit="testemit" отсутствует.
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы