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

Question

[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>`
})

Comments

[Модератор]

Не надо ставить как можно больше тэгов. Лучше оставить один, но конкретный, с которым проблема.
См.п.3.1 Регламента. Также обратите внимание на п.3.6

[rafuber]

Модератор, понял, спасибо

Answer 1

[0xD34F]

Всё получается, всё передаётся.

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

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

Comments

[rafuber]

спасибо большое за ответ!

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

а вызвал я его верно, в методе sendemit?
вы написали что я его нигде не вызываю

lessonInstance.component('question', {
  data() {
    return {

    }
},
  props: ['question', 'index',],
  emits: ['selected-answer', 'select-word'],
  computed: {
    isActive: function () {
      
    },
  },
  methods: {
   
    testfunc: 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"
                      @testemit="testfunc"
                      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>
              
              `
})

[0xD34F]

rafuber, зачем вы обработчик события testemit прицепили в div'у, откуда оно там возьмётся? Да ниоткуда.

[rafuber]

0xD34F, понял :)

все сработало
только остался один вопрос

как понимаю, передается событие только от потомка к родителю, но не выше?

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

например: есть:
компонент
подкомпонент
подподкомпонент

чтобы от подподкомпонента событие обработалось основным компонентом

[Роман Андреев]

Из того, что первым приходит в голову:
Передавать по цепочке вверх, пока не доберемся до нужного.

Использовать глобальную шину событий. (Часто бывает плохим решением)

Использовать менеджер состояний.

Если на vue3 - использовать provide/inject.

Каждый из способов имеет свои плюсы и минусы, сначала надо почитать.