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