無法將函數從組件分派到父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對象內部的函數如下所示：

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

看起來您的主要App邏輯被以下內容覆蓋：

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',在那里。