Vue.js無法訪問組件的方法

Question

我有兩個Vue.js組件Lobby和Game 。 我想使用Game作為包含所有邏輯的模型，以創建一個游戲並通過Lobby組件觸發它。

如果我運行該應用程序並單擊按鈕，則會出現以下錯誤

Uncaught TypeError: game.createGame is not a function
    at click (eval at createFunction (vue.js:9923), <anonymous>:2:76)
    at HTMLButtonElement.invoker (vue.js:1827)

如何從“ 大廳”組件訪問游戲方法？ 謝謝！

    let Game = {        
        methods: {
            createGame: function () {
                console.log('createGame clicked')
            }
        }
    }



    let Lobby = {
        template: `
            <div>
                    <button v-on:click="game.createGame()">Create</button>
            </div>
        `,
        data()  {
            return {
                'game': Game
            }
        },

    }

Answer 1

如果要從另一個組件調用方法，則可以使用Vue.js的Event bus 。主要思想是必須在A組件中發出全局調用，並使用bus.$on在B組件中接收它bus.$on

var bus = new Vue();

Vue.component('Increment', {
  template: "#inc",
  data: function() {
    return ({count: 0})
  },
  methods: {
    increment: function(){
      var increment = ++this.count
      bus.$emit('inc', increment)
    }
  }
})

Vue.component('Display', {
  template: "#display",
  data: function(){
    return {count: 0}
  },
  created: function(){
    bus.$on('inc', function(num){
       this.count = num    
  }.bind(this));
  }
})


vm = new Vue({
  el: "#example",
})

https://jsfiddle.net/emwcoy36/