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)

如何从 Lobby 组件访问游戏方法？谢谢！

    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组件中接收它

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/

Vue.js无法访问组件的方法

1 个答案: