关于 ref 为 DOM 元素或子组件实例动态创建引用的总结

vue3中，元素动态绑定了ref，在循环生成的元素中，对 div 做了动态绑定。如下：

<div v-for="item in group" :key="item.id">
  <div :ref="(el) => setDeleteMenuRef(el, item.id)"></div>
</div>

然后定义方法

<script setup>
const deleteMenuRefs = ref(new Map()); // 存储所有菜单的 DOM 引用

// 动态绑定 ref 的方法
const setDeleteMenuRef = (el, id) => {
  if (el) {
    deleteMenuRefs.value.set(id, el);
  } else {
    deleteMenuRefs.value.delete(id);
  }
};
</script>

在 Vue 3 中，ref 是一个非常重要的概念，它用于为 DOM 元素或子组件实例创建一个引用，方便在代码中访问它们。下面我会详细讲解 ref 的用法，以及你提到的代码片段 :ref="(el) => setDeleteMenuRef(el, item.id)" 的含义。

1. `ref` 的基本用法

（1）绑定到 DOM 元素

在 Vue 3 中，ref 可以绑定到模板中的 DOM 元素上。例如：

<template>
  <div :ref="myDivRef">Hello, World!</div>
</template>

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

export default {
  setup() {
    const myDivRef = ref(null); // 定义一个 ref，初始值为 null

    // 在某个方法中访问这个 DOM 元素
    const handleClick = () => {
      console.log(myDivRef.value); // myDivRef.value 就是对应的 DOM 元素
    };

    return {
      myDivRef,
      handleClick,
    };
  },
};
</script>

myDivRef 是一个 ref，它的值是一个 DOM 元素。
在模板中，通过 :ref="myDivRef" 将 myDivRef 绑定到 <div> 元素上。
当组件渲染完成后，myDivRef.value 就会指向这个 <div> 元素。

（2）绑定到子组件

ref 也可以绑定到子组件上，用于访问子组件的实例。例如：

<template>
  <ChildComponent :ref="childRef" />
</template>

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

export default {
  components: {
    ChildComponent,
  },
  setup() {
    const childRef = ref(null); // 定义一个 ref，初始值为 null

    // 在某个方法中访问子组件实例
    const handleChildMethod = () => {
      if (childRef.value) {
        childRef.value.someChildMethod(); // 调用子组件的方法
      }
    };

    return {
      childRef,
      handleChildMethod,
    };
  },
};
</script>

在模板中，通过 :ref="childRef" 将 childRef 绑定到子组件 <ChildComponent> 上。
当组件渲染完成后，childRef.value 就会指向子组件的实例，可以通过它调用子组件的方法。

2. 动态绑定 `ref`（如 `:ref="(el) => setDeleteMenuRef(el, item.id)"`）

在某些情况下，我们可能需要动态地为多个元素或组件绑定 ref，并且希望根据某些条件或数据来处理这些引用。Vue 3 支持通过函数的方式动态绑定 ref。

（1）代码分析

<template>
  <div v-for="item in items" :key="item.id" :ref="(el) => setDeleteMenuRef(el, item.id)">
    {{ item.name }}
  </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' },
    ]);

    // 定义一个对象来存储动态绑定的 ref
    const deleteMenuRefs = ref({});

    // 定义一个方法来设置动态绑定的 ref
    const setDeleteMenuRef = (el, id) => {
      if (el) {
        deleteMenuRefs.value[id] = el; // 将 DOM 元素存储到对象中，以 id 为键
      }
    };

    // 在某个方法中访问这些动态绑定的 ref
    const handleDelete = (id) => {
      const deleteMenuEl = deleteMenuRefs.value[id];
      if (deleteMenuEl) {
        console.log(deleteMenuEl); // 获取对应的 DOM 元素
        // 可以在这里执行删除菜单相关的操作
      }
    };

    return {
      items,
      deleteMenuRefs,
      setDeleteMenuRef,
      handleDelete,
    };
  },
};
</script>

（2）代码解释

动态绑定 ref 的方式
- 在模板中，<div> 元素的 ref 属性绑定为一个函数 :ref="(el) => setDeleteMenuRef(el, item.id)"。
- 这个函数接收两个参数：
  - el：当前绑定的 DOM 元素。
  - item.id：当前循环项的 id。
处理动态绑定的 ref
- 在 setup 函数中，定义了一个 deleteMenuRefs 对象，用于存储动态绑定的 ref。
- 定义了 setDeleteMenuRef 方法，当 DOM 元素被创建时，这个方法会被调用。
- 在 setDeleteMenuRef 方法中，将 DOM 元素 el 以 id 为键存储到 deleteMenuRefs.value 对象中。
访问动态绑定的 ref
- 在 handleDelete 方法中，可以通过 deleteMenuRefs.value[id] 获取到对应 id 的 DOM 元素。
- 这样就可以根据 id 动态地访问和操作对应的 DOM 元素。

（3）应用场景

这种动态绑定 ref 的方式非常适合以下场景：

当你需要为多个动态生成的元素绑定 ref，并且希望根据某些标识（如 id）来区分和操作这些元素时。
当你需要对一组元素进行统一的管理，例如批量操作、动态访问等。

3. 总结

ref 是 Vue 3 中用于为 DOM 元素或子组件实例创建引用的工具。
可以通过 :ref="myRef" 的方式将 ref 绑定到 DOM 元素或子组件上。
动态绑定 ref 的方式是通过函数 :ref="(el) => myFunction(el, otherParams)"，可以在函数中处理 ref 的值，例如将其存储到一个对象中，方便后续根据条件访问。
动态绑定 ref 的方式非常适合处理动态生成的元素集合，可以根据标识（如 id）来区分和操作这些元素。

posted @ 2025-03-19 11:24 smil、梵音阅读(749) 评论(0) 收藏举报

刷新页面返回顶部

smil、梵音