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

错误侦听器必须附加到发出事件的元素上。 当您有<div id="errorMessage" v-bind:class="cssClass" v-on:display-error="display()"> ，这会为该 div 何时发出事件添加一个侦听器，但该事件不会不是来自 div，它来自您的ListButtonMenu 。 您需要向该元素添加v-on指令，如下所示：

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

编辑：

你的 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>

Answer 2

因为我的ErrorMessage和ListButtonMenu组件没有父子关系，所以我选择了与使用自定义事件不同的解决方案。

相反，我使用我的应用程序状态（使用 Vuex 存储构建）作为事件总线来更新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>