Angular 5中如何从根组件聚焦深层嵌套的输入框？

嘿，我刚好碰到过一模一样的问题！之前用全局指令确实踩了多实例串线的坑，核心问题就是没给每个祖父组件和它对应的输入框建立专属关联。下面给你两个实用的解决方案，不管是Vue还是类似的组件化框架都适用：

这个方法能优雅地跨多层组件传递信息，不用层层传prop：

步骤1：给祖父组件添加唯一标识并提供方法 #

每个祖父实例生成一个唯一ID（Vue可以直接用内置的_uid，其他框架可以自己生成uuid），同时提供一个触发聚焦的方法：

<template>
  <div class="grandparent-container" @click="triggerFocus">
    <!-- 这里放你的多层嵌套组件：父组件、子组件... -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 用Vue内置的唯一ID区分不同实例，其他框架可以用uuid库生成
      instanceId: this._uid
    };
  },
  provide() {
    return {
      // 把当前实例ID传给所有后代组件
      grandparentInstanceId: this.instanceId,
      // 提供一个触发聚焦的方法
      requestFocus: this.handleRequestFocus
    };
  },
  methods: {
    // 点击祖父容器时触发，告诉后代组件要聚焦了
    triggerFocus() {
      this.handleRequestFocus(this.instanceId);
    },
    handleRequestFocus(targetId) {
      // 空方法，由后代组件重写逻辑
    }
  }
};
</script>

步骤2：在最深层输入框组件中注入并响应 #

在带输入框的子组件里，注入祖父提供的ID和方法，然后判断触发请求的是不是自己关联的祖父，是的话就聚焦输入框：

<template>
  <input ref="targetInput" type="text" placeholder="我是最深层输入框">
</template>

<script>
export default {
  inject: ["grandparentInstanceId", "requestFocus"],
  mounted() {
    // 重写祖父的方法，添加当前组件的聚焦逻辑
    const originalRequest = this.requestFocus;
    this.requestFocus = (targetId) => {
      // 只有当触发请求的ID和当前组件关联的祖父ID一致时，才聚焦
      if (targetId === this.grandparentInstanceId) {
        this.$refs.targetInput.focus();
      }
      // 保留原方法逻辑（如果有其他后代组件需要响应的话）
      originalRequest && originalRequest(targetId);
    };
  }
};
</script>

如果不想用Provide/Inject，也可以通过事件冒泡结合自定义属性来实现：

步骤1：祖父组件点击时标记事件 #

给祖父容器加自定义属性存实例ID，点击时把ID附加到事件对象上：

<template>
  <div 
    class="grandparent-container"
    :data-instance-id="instanceId"
    @click="(e) => markClickEvent(e)"
  >
    <!-- 多层嵌套组件 -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      instanceId: this._uid
    };
  },
  methods: {
    markClickEvent(e) {
      // 给事件对象加自定义属性，标识是哪个祖父实例被点击了
      e.grandparentInstanceId = this.instanceId;
    }
  }
};
</script>

步骤2：输入框组件监听全局点击事件 #

在输入框组件里监听全局点击，判断点击来源是不是自己关联的祖父：

<template>
  <input ref="targetInput" type="text">
</template>

<script>
export default {
  props: ["grandparentInstanceId"], // 从父组件层层传下来祖父的ID
  mounted() {
    document.addEventListener("click", this.handleGlobalClick);
  },
  beforeUnmount() {
    // 记得解绑事件，防止内存泄漏
    document.removeEventListener("click", this.handleGlobalClick);
  },
  methods: {
    handleGlobalClick(e) {
      // 先判断事件有没有标记祖父ID，且和当前组件的祖父ID匹配
      if (e.grandparentInstanceId !== this.grandparentInstanceId) return;
      
      // 再确认点击的元素确实属于当前祖父容器
      const clickedGrandparent = e.target.closest(".grandparent-container");
      if (clickedGrandparent?.dataset.instanceId === this.grandparentInstanceId.toString()) {
        this.$refs.targetInput.focus();
      }
    }
  }
};
</script>

全局指令是“无差别”的，它没办法知道你点击的是哪个祖父实例，自然找不到对应的输入框。上面两个方案的核心都是给每个祖父-输入框对打上唯一标识，确保点击事件能精准定位到对应的输入框。

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