無法從組件調度功能於母公司的Vue

Question

我有一個簡單的Vue演示顯示用戶一個模式，當他們點擊一個按鈕：

http://plnkr.co/edit/lZPD7HOjKFsNVNmnWAOB?p=preview

的問題是，我也想使用插件生成QR代碼，會去的模式裏面，所以我成立了我的組件裏面的方法使用$dispatch調用一個函數調用showQR：

methods: { 
       showQR: function(){ 
        console.log("Dispatching event for QR code") 
        this.$dispatch('showQR'); 
        return this.showModal = true  
      } 
    } 

我父母的Vue對象內部的功能看起來如T他：

new Vue({ 
     el: 'body', 
     events: { 
      showQR: function(){ 
       console.log("Inside the parent Vue") 
       new QRCode(document.getElementById("qrcode"), "http://stackoverflow.com/"); 
      } 
     } 
    }); 

我得到該組件的消息"Dispatching event for QR code"，但在父Vue公司是不工作的功能。如果我將邏輯放在模板中，我可以得到QR碼，但我寧願避免這種情況。有關如何使$dispatch工作的任何建議？我的目標是正確的Vue嗎？使用VueRouter這個順便說一句。任何幫助將是偉大的！

Answer 1

看起來像你的主要應用程序的邏輯獲取此重寫：

var App = Vue.extend({ 
    template: '<router-view></router-view>' 
}) 

如果您結合您的主要方法的對象與此擴展，你應該罰款。所以，像這樣的工作：

var App = Vue.extend({ 
    el: 'body', 
    events: { 
     showQR: function(){ 
      console.log("Inside the parent Vue") 
      new QRCode(document.getElementById("qrcode"), "http://stackoverflow.com/"); 
     } 
    }, 
    template: '<router-view></router-view>' 
}) 

你也很可能不希望/需要el: 'body',在那裏。