Question

我有两个独立的Vue组件需要通过事件总线相互通信。像：

形状component.Vue

import events from './events'
export default {
   ...
   methods() {
     sumbitForm() {
       events.$emit('form-submitted', data)
     }
   }
   ...
}

另一component.Vue

import events from './events'
export default {
  ....
  mounted() {
    events.$on('form-submitted, data => {
      this.list.push(data);
    }
  },
  data() {
    return {
      list: []
    }
  }
  ....
}

但是当事件被听到'this'并不是指'other-component'而是指实际的eventbus'事件'。

我该如何解决这个问题？

Answer 1

听起来像是你误解了这个问题。箭头函数绑定其上下文，并且该箭头函数的上下文正确绑定到其他组件，因为它位于方法中，并且方法自动绑定到其组件。以下示例按预期工作。

＆＃13;

const events = new Vue();

Vue.component('formComponent', {
  template: '<button @click="submitForm">Submit</button>',
  methods: {
    submitForm() {
      events.$emit('form-submitted', {
        foo: 1
      });
    }
  }
});

Vue.component('otherComponent', {
  template: '<div><div v-for="item in list">{{item}}</div></div>',
  data() {
    return {
      list: []
    }
  },
  mounted() {
    events.$on('form-submitted', data => {
      this.list.push(data);
    });
  }
});

new Vue({
  el: '#app'
});

＆＃13;

<script src="//unpkg.com/vue@latest/dist/vue.js"></script>
<div id="app">
  <form-component></form-component>
  <other-component></other-component>
</div>

＆＃13;

Answer 2

一种解决方案是将其复制到外部变量中，并使用它来访问组件的数据属性。例如，这应该有效：

import events from './events'
export default {
  ....
  mounted() {
    var that = this;
    events.$on('form-submitted, function(data) {
      that.list.push(data);
    )
  },
  data() {
    return {
      list: []
    }
  }
  ....
}

Vue：推送到事件阵列

2 个答案: