Vue.js getElementById（）定位了错误的组件实例

Question

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

子组件具有div元素：

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

和一个将改变其自身不透明度的函数：

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

问题是，当我告诉子组件的second实例执行其功能时，子组件的[[first实例将改变不透明度。

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

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

Answer 1

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

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

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

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

但是，直接操作DOM并不是非常Vue的方法。相反，您应该将不透明度绑定到数据属性并进行更改。
<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/[email protected]/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/[email protected]/dist/vue.js"></script>

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