Question

我创建了一个表单，通过eventbus将提交的数据发送给父级。但是，当我第二次完成表单时，会向父表单发送两条消息，并且对于每个新表单完成，消息数量会增加一。因此，第10次填写表格，将向eventbus发送10条消息。提交的实施如下：

表格

...
        <button @click.prevent="onSubmit" type="submit">Submit</button>
    </form>
</template>

<script>
  import EventBus from '../../../config/EventBus';

  export default {
      ....
      methods: {
          onSubmit() {
              EventBus.$emit('submit', this.category);
          },
      },
  };
</script>

为父级

<script>
  import EventBus from '../../../config/EventBus';

  export default {
      ...
      created() {
          EventBus.$on('submit', data => this.submit(data));
      },
      methods: {
          submit(category) {
              this.saveCategory(category);
              this.$router.push('/categories');
          },
      },
  };
</script>

我无法看到我所遗漏的内容，因为我认为事件总线不会将消息保留在堆栈中。

Answer 1

获取全局事件总线的最简单的解决方案（看起来你想要这样）是在添加组件之前执行以下操作。

var EventBus = new Vue();
Vue.prototype.$bus = EventBus;

然后您将组件添加到Vue中，例如

Vue.component('my-component', require('./MyComponent.vue');

每个Vue组件都可以访问$ bus，因此您可以轻松调用

created: function() {
   this.$bus.$on('event', function () { ... });
}

或者

this.$bus.$emit('event', data);

这是我的app.js

的完整示例

require('./bootstrap');

/**
 * Add am Event Bus
 */
var bus = new Vue();
Vue.prototype.$bus = bus;

/**
 * Add Components
 */
Vue.component('fv-prompt', require('./components/Prompt.vue'));

/**
 * Add an error handler to the Vue prototype.
 */
Vue.prototype._onError = function(error) {
    Vue.prototype.$bus.$emit('error', error);
};


/**
 * Create and mount the vue instance.
 */
const app = new Vue().$mount('#app');

引导程序

window._ = require('lodash');

window.Vue = require('vue');

require('vue-resource');

Vue.http.interceptors.push((request, next) => {
    request.headers.set('X-CSRF-TOKEN', Laravel.csrfToken);
    request.headers.set('Accept', 'application/json');

    next();
});

eventBus不会删除vue2.js中的上一条消息

1 个答案: