Пользовательское событие не записывается компонентом в Vue.js

Question

Вот моя архитектура компонентов

Компонент <ListButtonMenu> генерирует пользовательское событие display-error, как показано ниже.Эмиссия работает нормально, так как я вижу событие в VueDevtools:

<template>
    <div>
        <button type="button" class="btn btn-success" v-on:click="saveList()">
            Save
        </button>
    </div>
</template>

<script>
export default {
    props: {
        list: Object
    },
    methods: {
        saveList() {
            this.$emit('display-error');
        }
    }
}
</script>

Компонент <ErrorMessage> содержит элемент div, который прослушиваетк пользовательскому событию и вызывает метод display().Метод изменяет класс CSS компонента для отображения самого себя: v-on:display-error="display".К сожалению, это не работает, и класс CSS не изменяется.Чего мне не хватает?

<template>
    <div id="errorMessage" v-bind:class="cssClass" v-on:display-error="display()">
        <div class="row justify-content-center alert alert-danger alert-dismissable text-danger">
            Error: {{ errorMessage }}
            <button type="button" class="close" data-dismiss="alert" aria-hidden="true">
                &times;
            </button>
        </div>
    </div>
</template>

<script>
export default {
    data: function () {
        return {
            'cssClass': 'd-none',
            'errorMessage': 'Hello'
        }
    },
    methods: {
        display() {
            this.cssClass = 'show';
            this.errorMessage='Goodbye';
        }
    }
}
</script>

Answer 1

Поскольку мои компоненты ErrorMessage и ListButtonMenu не имеют отношения родитель-потомок, я выбрал другое решение, чем использование пользовательских событий.

Вместо этого я использую состояние своего приложения (построено с использованиемVuex store) в качестве шины событий для обновления errorObject, а компонент ErrorMessage использует вычисленные свойства для захвата errorObject и отображает себя.

Моя архитектура компонента остается такой же, как в вопросе.Вот файл store.js :

import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

export const store = new Vuex.Store({
    state: {
        errorObject: {
            flag: false,
            message: ''
        }
    }
});

Вот компонент ListButtonMenu :

<template>
    <div>
        <button type="button" class="btn btn-success" v-on:click="saveList()">
            Save
        </button>
    </div>
</template>

<script>
export default {
    props: {
        list: Object
    },
    methods: {
        saveList() {
            this.$store.state.errorObject.flag = true;
            this.$store.state.errorObject.message = 'My error mesage';
        }
    }
}
</script>

А вот ErrorMessage компонент;

<template>
    <div id="errorMessage" v-bind:class="cssClass">
        <div class="row justify-content-center alert alert-danger alert-dismissable text-danger">
            Error: {{ errorMessage }}
            <button type="button" class="close" v-on:click="close()">
                &times;
            </button>
        </div>
    </div>
</template>

<script>
export default {
    data: function () {
        return {
        }
    },
    computed: {
        cssClass() {
            if (this.$store.state.errorObject.flag) { return 'display' }
            else { return 'd-none' }
        },
        errorMessage() {
            return this.$store.state.errorObject.message;
        }
    },
    methods: {
        close() {
            this.$store.state.errorObject.flag = false;
            this.$store.state.errorObject.message= '';
        }
    }
}
</script>

Answer 2

Прослушиватели ошибок должны быть подключены к элементу, генерирующему событие. Когда у вас есть <div id="errorMessage" v-bind:class="cssClass" v-on:display-error="display()">, это добавляет слушателя, когда этот div генерирует событие, но событие приходит не из div, а из вашего ListButtonMenu. Вам нужно добавить директиву v-on к этому элементу следующим образом:

<ListButtonMenu v-on="display()" other="attributes"></ListButtonMenu>

Edit:

Ваш элемент ErrorMessage должен принимать ошибки от родителя, как это (обратите внимание на добавленный $emit для кнопки закрытия):

<template>
  <div id="errorMessage" v-bind:class="cssClass" v-on:display-error="display()">
    <div class="row justify-content-center alert alert-danger alert-dismissable text-danger">
      Error: {{ errorMessage }}
      <button v-on:click="$emit('input', false)" type="button" class="close" data-dismiss="alert" aria-hidden="true">
      &times;
      </button>
    </div>
  </div>
</template>

<script>
export default {
  props: [
    'errorMessage',
    'value', // Generally value is used to toggle things so that v-model works
  ],
  computed: {
    cssClass() {
      return this.value ? 'show' : 'd-none';
    }
  }
  methods: {
    display() {
      this.cssClass = 'show';
      this.errorMessage='Goodbye';
    }
  }
}
</script>

И тогда ваш родитель может выглядеть примерно так:

<template>
  <error-message v-model="showError" v-bind:errorMessage="errorMessage">
  <list-button-menu v-on:display-error="displayError()"></list-button-menu>
</template>

<script>
export default {
  data: function() {
    return {
      errorMessage: 'Hello',
      showError: false,
    }
  },
  methods: {
    displayError() {
      this.showError = true;
      this.errorMessage: 'Goodbye';
    }
  }
}
</script>