vue3 ref如何获取dom列表

要获取DOM列表，可以结合使用`ref`和`v-for`指令。首先，在组件中定义一个`ref`变量，例如：

<template>
  <div>
    <div v-for="item in items" :key="item.id" ref="items">{{ item.name }}</div>
  </div>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const items = ref([{ id: 1, name: 'item 1' }, { id: 2, name: 'item 2' }, { id: 3, name: 'item 3' }]);
    
    return {
      items
    }
  }
}
</script>

上面的代码中，我们在每个`div`元素上加了一个`ref="items"`属性，将其保存到`items`变量中。然后，我们可以通过`this.$refs.items`来获取所有带有`ref="items"`属性的元素组成的数组。例如：

mounted() {
  const itemList = this.$refs.items;
  console.log(itemList); // 输出所有item元素的列表
}

相关问题

vue3 ref获取dom宽高

### 如何在 Vue3 中使用 `ref` 获取 DOM 元素的宽高

为了获取 DOM 元素的宽度和高度，在 Vue 3 中可以利用 Composition API 提供的功能来完成此操作。下面是一个具体的例子，展示了如何定义模板中的元素并使用脚本部分访问其尺寸。

#### HTML 和 CSS 配置
先设置好带有特定类名 `.box` 的 div 容器用于测试，并赋予它一定的样式以便于观察效果：

<template>
  <div ref="boxElement" class="box"></div>
</template>

<style scoped>
.box {
  width: 200px;
  height: 150px;
  background-color: lightblue;
}
</style>

#### JavaScript 实现逻辑
接着编写相应的 TypeScript 或者纯 JS 脚本来处理挂载完成后读取该容器的实际大小的任务。这里采用的是 `<script setup>` 方式简化书写过程[^2]。

<script setup lang="ts">
import { ref, onMounted } from 'vue'

// 创建响应式的引用对象关联至实际渲染出来的 DOM 结构
const boxElement = ref()

onMounted(() => {
  // 当组件被插入文档之后执行回调函数
  if (boxElement.value) {
    const width = boxElement.value.offsetWidth
    const height = boxElement.value.offsetHeight
    
    console.log(`Width is ${width}px and Height is ${height}px`)
  }
})
</script>

上述代码片段中，当页面加载完毕并且组件已经成功挂在到真实 DOM 上时，会触发 `onMounted()` 生命周期钩子内的匿名函数运行；此时可以通过之前声明好的 `boxElement` 来取得对应节点的信息，进而打印出它的外接矩形区域（即包含内边距在内的整体尺寸）下的宽度与高度值。

vue3 ref获取dom

Vue3中通过ref获取DOM的方式发生了变化。在Vue2中，我们可以使用$this.$refs来获取组件中的DOM元素，但是在Vue3中，这种方式已经被废弃了。Vue3中，我们应该使用`ref`函数来获取DOM。

`ref`函数能够在模板中声明一个DOM元素的引用，同时也能够在JS代码中使用`ref`函数来获取刚刚声明的这个DOM元素的引用。

下面是一个例子：

模板中的使用：

<template>
  <div>
    <button ref="myBtn" @click="handleClick">Click me</button>
  </div>
</template>

在JS中的使用：

<script>
  import { ref } from 'vue';
  export default {
    setup() {
      const myBtn = ref(null);
      function handleClick() {
        if (myBtn.value) {
          myBtn.value.disabled = true;
        }
      }
      return {
        myBtn,
        handleClick
      };
    }
  };
</script>

在这个例子中，我们使用了Vue3的`ref`函数在模板中声明了一个`button`元素的引用，并且在JS代码中通过`ref`函数获取了这个引用。在`handleClick`函数中，我们通过`myBtn.value`来访问这个引用，以此来改变Button的disabled属性。

综上所述，Vue3中通过`ref`函数来获取DOM的方式更加直观和方便。它能够大大提高Vue3应用的开发效率和开发体验，非常值得我们使用。