Событие Vue.js $ emit запускает, но ничего не происходит - PullRequest
Новая
       24

Событие Vue.js $ emit запускает, но ничего не происходит

0 голосов
/ 02 мая 2019

Я пытаюсь вызвать событие $ emit из дочернего компонента в Vue, чтобы вызвать функцию в App.vue.Событие запускается в соответствии с инспектором Vue, а инспектор DOM показывает, что DIV настроен на запуск события, но ничего не происходит.

Я попытался переименовать событие, убедившись, что функции работают с событием щелчка, привязываются к различным компонентам и элементам div и не включают полезную нагрузку с событием.Ничто не похоже на работу.Я пробовал и Firefox, и Chrome, и оба заканчиваются одним и тем же результатом: Вызванное событие, в котором ничего не происходит.

Дочерний компонент и метод 

<div class="navbutton" v-on:click="clicked(data.id)">
  <p>{{data.text}}</p>
</div>

clicked(id){
switch(id){
    case 1:
       alert("One");
       break;
    case 2:
        this.$emit('testemit');
        break;
    case 3:
        alert("Three");
        break;
    case 4:
        alert("Four");
        break;
    default:
        alert("DEFAULT");
        break;
    }
}

Из App.vue 

<div v-on:testemit="EmitFunction"></div>

EmitFunction() {
    alert('MESSAGE');
}

Я ожидаю, что при нажатии на вторую кнопку появится сообщение «СООБЩЕНИЕ», однако ничего не происходит.Три другие кнопки (1, 3 и 4) работают правильно.

1 Ответ

0 голосов
/ 02 мая 2019

Вам необходимо активировать emit и прослушивать родительский компонент, например: 

//app.vue
<template>
  <my-component v-on:testemit="EmitFunction"/>
</template>

, и ваша EmitFunction () в ваших методах выполняет то, что делает ваш "нажатый".

methods: {
  EmitFunction(id) {
    switch... etc

и в вашем компоненте ... 

//myComponent.vue
<div class="navbutton" v-on:click="$emit('testemit', id)">
  <p>{{data.text}}</p>
</div>
...