Vue2中如何通过编程方式获取VueComponent的ID？

核心问题排查与解决方案 #

1. 组件未挂载导致$el未初始化 #

如果在组件mounted钩子执行前访问component.$el.id，此时DOM尚未渲染完成，必然返回undefined。

• 处理方式：在组件的mounted/updated钩子中操作，或用$nextTick等待DOM更新：

  this.$nextTick(() => {
    const targetId = this.$refs.targetComponent.$el.id;
    this.$vuetify.goTo(`#${targetId}`);
  });
  

2. ID未绑定到组件根DOM元素 #

你给组件设置的ID可能没有关联到组件的根节点上，导致$el.id无法读取。

• 处理方式：在组件内部明确将ID绑定到根元素：

  <!-- 子组件模板 -->
  <template>
    <div :id="componentId">
      <!-- 组件内容 -->
    </div>
  </template>
  
  <script>
  export default {
    props: ['componentId']
  }
  </script>
  

  父组件中直接使用传入的ID拼接选择器：

  this.$vuetify.goTo(`#${this.targetComponentId}`);
  

3. 直接用组件ref替代ID #

既然$vuetify.goTo()支持传入DOM元素，无需绕ID，直接传组件的$el更可靠：

• 处理方式：确认组件已挂载后直接传入DOM元素：

  if (this.$refs.targetComponent) {
    this.$vuetify.goTo(this.$refs.targetComponent.$el);
  }
  

4. 检查组件是否为多根节点 #

若组件存在多个根元素，$el仅指向第一个根节点，如果ID设置在非第一个节点上，就会读取失败。

• 处理方式：将ID移至第一个根元素，或给组件套一层根容器并绑定ID。

内容的提问来源于stack exchange，提问作者Cal Courtney