Vue 中如何访问重复元素？高级 refs 技巧揭秘

vue.js

2024-03-14 15:08:40

动态访问重复元素：Vue 中 refs 的高级技巧

问题

在 Vue.js 应用中，使用 refs 是访问元素的常见方法。然而，当组件产生重复元素时，ref 只会作用于第一个元素。这就会产生一个问题：如何为重复元素指定特定元素？

解决方法

1. 创建变量存储 props.type 名称

在父组件中创建计算属性，返回 props.type 的名称。然后，可以在组件中使用该计算属性作为 ref 的名称。

2. 引用重复组件内的 div

在组件中，为 div 添加唯一的类名。在父组件中，使用 querySelector() 或 querySelectorAll() 来获取所有具有该类名的 div。

代码示例

方法 1：创建变量存储 props.type 名称

main.vue ：

<template>
  <component v-for="type in types" :key="type" :type="type" ref="componentType">
    {{ type }}
  </component>
</template>

<script>
export default {
  data() {
    return {
      types: ['foo', 'bar', 'baz']
    }
  },
  computed: {
    componentType() {
      return this.type;
    }
  }
};
</script>

Component.vue ：

<template>
  <div :ref="componentType">text</div>
</template>

方法 2：引用重复组件内的 div

Component.vue ：

<template>
  <div class="unique-class-name" :ref="type">text</div>
</template>

main.vue ：

<template>
  <component v-for="type in types" :key="type" :type="type">
    {{ type }}
  </component>
</template>

<script>
export default {
  data() {
    return {
      types: ['foo', 'bar', 'baz']
    }
  },
  mounted() {
    const divs = document.querySelectorAll('.unique-class-name');
    divs.forEach((div) => {
      // 操作 div
    });
  }
};
</script>