이것이 Vue.js 컴포넌트에서 ID를 설정하는 올바른 방법입니까?

이것이 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>

이 코드는 게임 캔버스를 내 템플릿에 첨부합니다.하지만 놀랍게도 그것은 '가끔'만 작동했다.

디버깅을 몇 시간 동안 진행한 결과, 새로운 게임을 인스턴스화할 때 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>

효과가 있습니다만, 좀 더 심플하고 우아한 방법이 없을까요?

Phaser를 통합하기 위한 하나의 더 나은 솔루션.어플리케이션에 게임이 직접 HTML 요소를 전달합니다.HTML 요소는 Phaser에서 지원되는 구성입니다.게임.

vue에서 HTML 요소에 대한 참조를 얻으려면 refs를 사용할 수 있습니다. 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>

언급URL : https://stackoverflow.com/questions/49611796/is-that-the-right-way-to-set-an-id-in-vue-js-component