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

我正在尝试将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>

从“移相器”导入移相器
导出默认值{
数据（）{
返回{
id:null，
游戏名称：空
}
},
挂载（）{
this.id='game'+this.\u uid
变量配置={
家长：这个.id，
类型：Phaser.CANVAS
}
this.game=new Phaser.game（配置）
....
}
}

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

经过数小时的调试，我发现在实例化新游戏时，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>

从“移相器”导入移相器
导出默认值{
数据（）{
返回{
id:null，
游戏名称：空
}
},
安装前（）{
this.id='game'+this.\u uid
},
挂载（）{
变量配置={
家长：这个.id，
类型：Phaser.CANVAS
}
this.game=new Phaser.game（配置）
....
}
}

---

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

将Phaser.Game集成到应用程序中的一个更好的解决方案是直接将config传递给HTML元素

要在vue中获取对HTML元素的引用，您可以使用，这些基本上是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>

从“移相器”导入移相器
导出默认值{
数据（）{
返回{
游戏名称：空
}
},
挂载（）{
变量配置={
父项：此.$refs.myDiv，
类型：Phaser.CANVAS
}
this.game=new Phaser.game（配置）
....
}
}

我不希望您的第一个示例工作，因为它包含无效的javascript。不能像您尝试的那样在对象定义中设置另一个变量。我想您可以在初始化

var config

之前，在

mounted

钩子中设置

this.id

。但是我也不知道你从哪里得到了

this.\u uid

值，所以我也觉得有些代码你没有分享，这可能也会影响结果。我也很惊讶，但它是有效的。我忘了提到我正在使用Webpack传输这段代码…嗯，不，无效。您可能已经配置了您的网页包，或者ide设置了一种不会将其显示为错误的方式（尽管如果这是真的，我也会感到惊讶），但它不会透明地执行您正在尝试的操作。另一种解释是，您没有将代码的各个部分正确地复制/粘贴到您的帖子中，因此您正在测试的内容与您在此处共享的内容不同。这是完整的未更改代码，我可以向您保证它是有效的：您的第二个示例看起来是有效的。我是说你的第一个例子有无效的javascript，这肯定会把事情搞砸。你的问题是“如何使我的代码更简单？”我的意思是你可以把

this.id='game'+this.\u uid

作为

mounted

钩子的第一行，而不必在mount之前使用

。我需要在同一页上有多个实例，这会有问题吗？我会尝试一下，谢谢。对于refs，这不是问题，对于id，每个组件都需要一个唯一的id（并防止使用相同id的组件之间意外发生冲突），因此在这种情况下应该是有用的。我认为使用外部包解决问题并不好，如果框架本身已经有了解决方案，但这是我的观点，请随意为您的问题添加另一个答案，解释如何使用您链接的外部包来完成此操作，并接受这样一个事实：如果没有外部包，这对您帮助最大，我不知道如何在我的页面中拥有唯一的id。您建议的解决方案不能解决唯一id问题，或者可能有一些我不明白的地方。