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

修改

感谢您提供的信息。当你把东西复制到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

Vue.js活动巴士

1 个答案: