Vue.js事件总线

Question

我正在研究一个vue单个页面项目，并且使用一个空的Vue实例作为中心事件总线。但是在发起事件时存在一些问题。

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

我会评论，但点限制。看起来你只是发布代码片段，所以很难得到完整的图片。我假设你已经设置这个.contract是一个对象？我不知道你的数据函数是什么样子的，并且错误消息会有帮助，但是这听起来像是你正试图为尚不存在的对象分配一个字段。

编辑

感谢您的信息。我不确定您将b.vue编辑为将错误复制到stackoverflow时发生错误，但根据您提供的代码，我的猜测是您在错误的地方编写了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