Vue.js getElementById() 定位错误的组件实例

Question

我正在尝试在Vue.js中构建一个小项目，我定义了一个子组件，其父组件有六个实例。

子组件有一个div元素:

<div class="player" id="player1">

以及一个将改变其自身不透明度的函数:

changeOpacity(){document.getElementById('playerName').style.opacity = 0.5;}

问题是当我告诉子组件的第二个实例执行其功能时，子组件的第一个实例将更改不透明度。

我怀疑它与唯一的 div id 有关，即通过创建子组件的多个实例，id:playerName 不再是唯一的。

有人对子实例如何访问自己的组件元素而不干扰其自身的其他实例有什么建议吗？

Answer 1

正如您所注意到的，这是因为 ids 是全局的，并且 getElementById 将返回 DOM 中具有该 id 的第一个元素。它对你的 Vue 组件边界一无所知。

访问组件内元素的正确方法是使用 $refs，而不是 getElementById。

<div ref="playerName">...</div>

changeOpacity () {
  this.$refs.playerName.style.opacity = 0.5
}

但是，直接操作 DOM 并不是一种非常 Vue 的方式。相反，您应该将不透明度绑定(bind)到数据属性并更改它。

<div :style="{ opacity }">...</div>

data () {
  return {
    opacity: 1
  }
}

changeOpacity () {
  this.opacity = 0.5
}

全文:

new Vue({
  el: '#app',

  data () {
    return {
      opacity: 1
    }
  },
  
  methods: {
    changeOpacity () {
      this.opacity = 0.5
    }
  }
})

<script src="https://unpkg.com/<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="0d7b78684d3f233b233c3c" rel="noreferrer noopener nofollow">[email protected]</a>/dist/vue.js"></script>

<div id="app">
  <div :style="{ opacity }">
    Content
  </div>
  <button @click="changeOpacity">Change</button>
</div>

如果它只是一个特定的不透明度值，例如 0.5，那么您确实应该使用 CSS 类。看起来像这样:

new Vue({
  el: '#app',

  data () {
    return {
      halfHide: false
    }
  },
  
  methods: {
    changeOpacity () {
      this.halfHide = true
    }
  }
})

.half-hide {
  opacity: 0.5;
}

<script src="https://unpkg.com/<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="3046455570021e061e0101" rel="noreferrer noopener nofollow">[email protected]</a>/dist/vue.js"></script>

<div id="app">
  <div :class="{ 'half-hide': halfHide }">
    Content
  </div>
  <button @click="changeOpacity">Change</button>
</div>