<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>

<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>

<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>

<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>