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

由于我的>>> print(left_rotation(5,1,[1,2,3,4,5])) 1 2 3 4 5 [2, 3, 4, 5, 1]和var totalDays = endDate.diff(startDate, "days");组件没有父子关系，因此我选择了与使用自定义事件不同的解决方案。

相反，我使用我的应用程序状态（使用Vuex存储构建）作为事件总线来更新ErrorMessage，而ListButtonMenu组件使用计算所得的属性来捕获errorObject并显示自己。

我的组件架构与问题中的相同。这是文件 store.js ：

ErrorMessage

这是 ListButtonMenu 组件：

errorObject

这里是 ErrorMessage 组件；

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

Vue.use(Vuex);

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

Vue.js中的组件未捕获自定义事件

2 个答案: