javascript - 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

我会评论，但点限制。看起来您只发布了代码片段，因此很难获得完整的图片。我假设您已经将 this.contract 设置为对象？我不知道您的数据函数是什么样的，错误消息会有所帮助，但听起来您正在尝试在尚不存在的对象上分配一个字段。

编辑

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