Vue.js事件总线

Question

我正在处理一个vue单页项目，我使用一个空的Vue实例作为中心事件bus.But，在触发一个事件时会出现一些问题。

eventbus.js

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

a.vue

import bus from '~js/eventBus'
methods: {
    go(name) {
        bus.$emit('setPartner', name);
            this.$router.go(-1);
    }
}

b.vue

import bus from '~js/eventBus'
data() {
         return {
           contract: {
               contractSubject: ''
           }
         }
     },
mounted(){

     bus.$once('setPartner', data => {
          this.contract.contractSubject = data;
     });
}

在b.vue文件中，我可以接收数据，但不能将数据的值分配给“this.contract.contractSubject”

Answer 1

我想评论一下，但要指出一些限制。看起来你只是在发布代码片段，所以很难得到完整的图片。我假设您已经将this.contract设置为对象了？我不知道您的数据函数是什么样子的，错误消息可能会有帮助，但听起来您想要在一个还不存在的对象上分配一个字段。

编辑

谢谢你提供的信息。我不确定当您将内容复制到堆栈溢出时，对b.vue的编辑是否是错误的，但是根据您提供的代码，我的猜测是您在错误的地方编写了data()。它在mounted()中，而不是作为组件对象的键值，因此this.contract不会访问它。

我设法让它在下面的设置下工作

a.vue

import bus from './bus.js';

export default {
  name: 'sitea',
  methods: {
    go(name) {
      bus.$emit('setPartner', name);
    }
  }
}

b.vue

import bus from './bus.js'

export default {
  name: 'siteb',
  data() {
    return {
      contract: {
        contractSubject: ''
      }
    }
  },
  mounted() {
    bus.$once('setPartner', data => {
      console.log(data);
      this.contract.contractSubject = data;
    });
  }
}

更多信息