Vue中如何为批量渲染的组件创建动态Ref以定位特定元素？

针对你遇到的批量渲染组件后无法通过固定ref定位特定元素的问题，以下是两种直接可行的实现方案，核心思路是通过props.type作为唯一标识来管理组件/元素引用，最终实现点击滚动到对应元素的需求。

方案1：父组件集中管理子元素引用 #

通过动态ref将每个子组件的实例存入对象（以type为键），父组件直接获取目标元素并触发滚动。

修改后的代码 #

Main.vue

<template>
  <div>
    <!-- 示例：根据type生成滚动触发按钮 -->
    <button 
      v-for="m in array" 
      :key="m" 
      @click="scrollToTarget(m)"
    >
      滚动到{{ m }}
    </button>

    <div v-for="(m, i) in array" :key="i">
      <!-- 动态绑定ref，将子组件实例存入componentRefs对象 -->
      <Component 
        :type="m" 
        :ref="el => { if (el) componentRefs[m] = el }" 
      />
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import Component from './Component.vue';

// 示例数据，替换为你的实际数组
const array = ['typeA', 'typeB', 'typeC'];
// 存储子组件实例的对象，键为type值
const componentRefs = ref({});

// 滚动到目标元素的方法
const scrollToTarget = (type) => {
  const targetComponent = componentRefs.value[type];
  if (targetComponent) {
    // 获取子组件的根DOM元素，触发滚动
    targetComponent.$el.scrollIntoView({ 
      behavior: 'smooth', 
      block: 'start' 
    });
  }
};
</script>

Component.vue

<template>
  <div>text - {{ type }}</div>
</template>

<script setup>
import { defineProps } from 'vue';

// 定义props，setup语法糖直接使用defineProps
defineProps({
  type: {
    type: String,
    required: true
  }
});
</script>

方案2：子组件封装滚动方法并暴露 #

将DOM操作封装在子组件内部，通过defineExpose暴露滚动方法，父组件调用子组件方法实现滚动，更符合组件封装原则。

修改后的代码 #

Component.vue

<template>
  <!-- 子组件内部维护目标元素的ref -->
  <div ref="targetDiv">text - {{ type }}</div>
</template>

<script setup>
import { ref, defineProps, defineExpose } from 'vue';

const props = defineProps({
  type: {
    type: String,
    required: true
  }
});

// 目标元素的ref
const targetDiv = ref(null);

// 封装滚动到自身的方法
const scrollToSelf = () => {
  if (targetDiv.value) {
    targetDiv.value.scrollIntoView({ 
      behavior: 'smooth', 
      block: 'start' 
    });
  }
};

// 将方法暴露给父组件
defineExpose({
  scrollToSelf
});
</script>

Main.vue（仅修改滚动方法）

// 滚动方法改为调用子组件暴露的方法
const scrollToTarget = (type) => {
  const targetComponent = componentRefs.value[type];
  if (targetComponent) {
    targetComponent.scrollToSelf();
  }
};

注意事项 #

• 避免在v-for中使用固定名称的ref，Vue会自动将其处理为数组，但无法直接对应到特定type的组件；
• 动态绑定ref时要判断el是否存在，避免组件卸载时存入null；
• 两种方案都依赖type的唯一性，确保你的array中type值不重复。

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