Vue.js：如何为每个组件实例设置唯一 ID？

Question

我想用 Vue.js 创建一个组件，其中包含一个 label 和一个 input 。例如 ：

 <label for="inputId">Label text</label>
<input id="inputId" type="text" />

如何为每个组件实例设置唯一 ID？

原文由 PierreB 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

每个组件都有一个唯一的 id，可以通过 this._uid 访问。

 <template>
  <div>
    <label :for="id">Label text for {{id}}</label>
    <input :id="id" type="text" />
  </div>
</template>

<script>
export default {
  data () {
    return {
      id: null
    }
  },
  mounted () {
    this.id = this._uid
  }
}
</script>

例如，如果您想对 id 进行更多控制，可以在父组件中生成它们。

原文由 zxzak 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

Nihat 的观点（上图）：Evan You 建议不要使用 _uid：“vm _uid 保留供内部使用，重要的是保持私有（而不是在用户代码中依赖它），这样我们就可以灵活地更改它的未来潜在用例的行为。…我建议自己生成 UID [使用模块、全局 mixin 等]“

在 这个 GitHub 问题 中使用建议的 mixin 来生成 UID 似乎是一种更好的方法：

 let uuid = 0;

export default {
  beforeCreate() {
    this.uuid = uuid.toString();
    uuid += 1;
  },
};

原文由 buckthorn 发布，翻译遵循 CC BY-SA 4.0 许可协议