在Vue中，id的作用類似于HTML中的id，可以通過id選擇器獲取到對應(yīng)的元素。然而，當(dāng)在同一組件中存在多個id相同的元素時，就會出現(xiàn)重復(fù)id的問題。如下所示：

<template>
<div>
<div id="example">示例1</div>
<div id="example">示例2</div>
</div>
</template>

在這種情況下，Vue只會綁定第一個id所對應(yīng)的元素。也就是說，第二個id所對應(yīng)的元素將失去Vue的控制，并且在渲染時也不會顯示。這時需要解決重名id的問題。

解決重名id的方法有兩種：

1.使用class替代id

<template>
<div>
<div class="example">示例1</div>
<div class="example">示例2</div>
</div>
</template>
<script>
export default {
mounted () {
const examples = document.querySelectorAll('.example')
console.log(examples) //將獲取到所有class為example的元素
}
}
</script>

2.使用唯一的id，并使用ref引用元素

<template>
<div>
<div id="example1" ref="example1">示例1</div>
<div id="example2" ref="example2">示例2</div>
</div>
</template>
<script>
export default {
mounted () {
const example1 = this.$refs.example1
const example2 = this.$refs.example2
console.log(example1, example2) //將獲取到組件中的兩個元素
}
}
</script>

上述兩種方法都可以解決Vue中id重名的問題，但推薦使用第二種方法，因為它能夠讓代碼更加優(yōu)美，并且避免了class的樣式問題。使用ref可以方便地獲取到組件中的元素，并且無需擔(dān)心重名的問題。