为什么Vue全球EventBus在我的项目中不起作用

时间:2019-10-15 09:06:32

标签: javascript laravel vue.js

我在laravel中使用vue js,我需要使用全局事件总线。我创建了event-bus.js,然后将其导入到需要使用的位置。当我单击时,会生成事件,但是侦听器没有任何反应。我尝试了一切,但没有用。请帮助我,我已经工作了3天

我尝试在app.js中创建一个eventBus,但也没有帮助

我的EditDiscountComponent

import { EventBus } from "../../../event-bus";

editDiscount () {
        const data = {
          discount_id: this.discountData.discount_id,
          status: this.discountData.status,
          type: this.discountData.type,
          percentage:this.discountData.percentage,
          amount:this.discountData.amount,
        };

        EventBus.$emit('update-discount', data);

         this.languages.forEach(lang => {
              if (lang.code && this.discountData[lang.code] !== undefined) {
                  data[lang.code] = this.discountData[lang.code];
              }
          });
        this.$store.dispatch(actions.EDIT_DISCOUNT, data)
          .then(res => {
            if (res && res.data.status) {

              // window.location.href = '/admin/discounts';

            } else {
              this.$store.commit(mutations.SET_SNACKBAR_SHOW, true);
              this.$store.commit(mutations.SET_SNACKBAR_TEXT, res.data.message);
            }
          }).catch(console.error);

      },
    },

我的产品组件


import { EventBus } from "../../../event-bus";

 mounted() {
            EventBus.$on('update-discount', ($data) => {
                console.log($data);
            });
            this.getCategories();
            this.getProducts();
        },

我使用其他方法尝试了该函数的回调,但是没有结果,并且我在mount()中尝试了该侦听器,但这没有帮助

1 个答案:

答案 0 :(得分:0)

您可以在项目的eventBus.js文件夹中创建src文件,该文件如下所示

import Vue from 'vue'
export default new Vue()

并尝试将其导入,如下所示:

import EventBus from '@/eventBus'

或者这可能对您有帮助https://alligator.io/vuejs/global-event-bus/