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 将 return 成为 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/vue@2.6.11/dist/vue.js"></script>

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

如果它只是一个特定的不透明度值，比如 0.5，那么您真的应该改用 CSS class。那看起来像这样：

new Vue({
  el: '#app',

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

.half-hide {
  opacity: 0.5;
}

<script src="https://unpkg.com/vue@2.6.11/dist/vue.js"></script>

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

Vue.js getElementById() 以错误的组件实例为目标

Vue.js getElementById() targets wrong instance of component

element

unique

instance

vue.js