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 设置为对象？我不知道您的数据函数是什么样的，错误消息会有所帮助，但听起来您正试图在一个尚不存在的对象上分配一个字段。

编辑

感谢您提供信息。当您将内容复制到 Whosebug 时，我不确定您对 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;
    });
  }
}

More information

Vue.js 事件总线

Vue.js event bus

javascript

vue.js

event-bus