Question

我正在尝试将Phaser 3与Vue.js 2集成。

我的目标是创建一个与游戏画布相关联的Vue.js组件。

我最初的解决方案是：

<template>
  <div :id="id">
  </div>
</template>

<script>
import Phaser from 'phaser'
export default {
  data () {
    return {
      id: null,
      game: null
    }
  },
  mounted () {
    this.id = 'game' + this._uid
    var config = {
      parent: this.id,
      type: Phaser.CANVAS
    }
    this.game = new Phaser.Game(config)

    ....

  }
}
</script>

此代码将游戏画布附加到我的模板。但令我惊讶的是它只能“有时”起作用。

经过数小时的调试后，我发现在我实例化我的新游戏时，我的DOM中的div元素没有使用id更新。

所以我想出了在beforeMount（）方法中实例化id的解决方案，如下所示：

<template>
  <div :id="id">
  </div>
</template>

<script>
import Phaser from 'phaser'
export default {
  data () {
    return {
      id: null,
      game: null
    }
  },
  beforeMount () {
    this.id = 'game' + this._uid
  },
  mounted () {
    var config = {
      parent: this.id,
      type: Phaser.CANVAS
    }
    this.game = new Phaser.Game(config)

    ....

  }
}
</script>

它正在运作，但我想知道是否有更简单优雅的解决方案？

Answer 1

将Phaser.Game集成到应用程序中的一个更好的解决方案是直接传递配置HTML元素a configuration supported by Phaser.Game。

要在vue中获取对HTML元素的引用，可以使用refs，这些基本上是id，但是组件本身是本地的，因此不存在创建冲突的风险。

<template>
  <div ref="myDiv">
  </div>
</template>

<script>
import Phaser from 'phaser'
export default {
  data () {
    return {
      game: null
    }
  },
  mounted () {
    var config = {
      parent: this.$refs.myDiv,
      type: Phaser.CANVAS
    }
    this.game = new Phaser.Game(config)
    ....
  }
}
</script>

这是在Vue.js组件中设置id的正确方法吗？

1 个答案: