Vue3 中怎样在循环中获取子组件的引用

首先，我的需求是：

  1. 通过父组件循环子组件，展示子组件列表
  2. 循环的过程中，通过 :ref="(el) => addRefs(el, item.id)" 方式调用 addRefs 函数，以向 refs 数组添加所有子组件的引用，并在添加前打印出 el 对象信息（即：print_1，这里假设：id = 123）
  3. 当页面的生命周期进行到 onUpdated（即：页面渲染完毕）时，打印出假设条件：id=123 的ref（即：print_2）
  4. 最后，通过子组件的实例，调用子组件暴露出来的 fx 函数

参考以下官方文档，编写源代码（如下）：
《官方文档》

// 子文档：
<template>
  <div  ref="childRef">
    ...
  </div>
</template>

<script lang="ts" setup>
  const fx() {
    ...
  }

defineExpose({ fx });
</script>

// 父文档：
<template>
  <div v-for="(item, index) in items" :key="item.id">
    <Child :ref="(el) => addRefs(el, item.id)"></Child>
  </div>
</template>

<script lang="ts" setup>
  import Child from './Child.vue';

  const refs = ref({})

  // 假设：id = 123
  const addRefs(el, id) {
    console.log(`print_1: ${JSON.stringify(el)}`); // 打印结果：{}
    refs[id] = el;
  }

  onUpdated(() => {
    // 假设：id = 123
    console.log(`print_2: ${JSON.stringify(refs['123'])}`); // 打印结果：{}
  });
</script>

现在遇到的问题是：
无论是 print_1 还是 print_2，打印出来的 el 对象都是 {}（即：空对象），请问怎样才能获取 el 对象，并添加到 refs 列表中？
Vue 版本号：3.2.33

在 Vue 3 中，你可以使用 ref 和 reactive 来获取子组件的引用并在父组件中访问它们。

首先，你需要在父组件中创建一个 refs 数组来存储子组件的引用：

<template>
  <div>
    <child-component v-for="item in items" :key="item.id" :ref="(el) => addRefs(el, item.id)" />
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  setup() {
    const items = reactive([
      { id: 1 },
      { id: 2 },
      { id: 3 },
    ]);
    const refs = ref([]);

    const addRefs = (el, id) => {
      refs.value.push({ id, ref: el });
    };

    onUpdated(() => {
      console.log(refs.value); // 打印所有子组件的引用
      console.log(refs.value.find(ref => ref.id === 123).ref); // 打印 id=123 的子组件的引用
    });

    return { items, refs, addRefs };
  }
};
</script>

然后，在子组件中，你需要使用 defineExpose 来暴露你想要在父组件中访问的函数：

<template>
  <div>
    <!-- 子组件模板 -->
  </div>
</template>

<script>
export default {
  setup() {
    const fx = () => {
      // fx 函数的实现
    };

    defineExpose({ fx }); // 暴露 fx 函数给父组件使用
  }
};
</script>

最后，在父组件中，你可以通过子组件的引用来调用暴露的函数：

<template>
  <div>
    <child-component v-for="item in items" :key="item.id" :ref="(el) => addRefs(el, item.id)" />
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  setup() {
    const items = reactive([
      { id: 1 },
      { id: 2 },
      { id: 3 },
    ]);
    const refs = ref([]);

    const addRefs = (el, id) => {
      refs.value.push({ id, ref: el });
    };

    onUpdated(() => {
      console.log(refs.value); // 打印所有子组件的引用
      const ref = refs.value.find(ref => ref.id === 123).ref; // 获取 id=123 的子组件的引用
      ref.fx(); // 调用子组件暴露的 fx 函数
    });

    return { items, refs, addRefs };
  }
};
</script>

引用 皆我百晓生 小程序回复内容作答：
在Vue 3中，可以使用ref和toRef来获取子组件的引用。在循环中，可以通过将子组件的引用存储在一个对象中，然后将该对象作为ref进行传递。

以下是修改后的代码示例：

<!-- 子组件 -->
<template>
  ...
</template>
 
<script lang="ts" setup>
  const fx = () => {
    ...
  }

  defineExpose({ fx });
</script>
 
<!-- 父组件 -->
<template>
  <div v-for="(item, index) in items" :key="item.id">
    <Child :ref="el => addRefs(el, item.id)"></Child>
  </div>
</template>
 
<script lang="ts" setup>
  import { ref, onUpdated } from 'vue';
  import Child from './Child.vue';

  const refs = ref({});

  const addRefs = (el, id) => {
    console.log(`print_1: ${JSON.stringify(el)}`);
    refs.value[id] = el;
  }

  onUpdated(() => {
    console.log(`print_2: ${JSON.stringify(refs.value['123'])}`);
  });
</script>

在上述代码中，我们使用refs.value来访问refs对象的值。这样做是因为refs是一个响应式对象，我们需要通过.value来访问其实际的值。

请注意，onUpdated钩子函数在组件更新后才会触发，所以在页面渲染完毕时，print_2才会打印出正确的引用对象。

希望这可以帮助到你！

根据您提供的代码，可以看出问题可能出在子组件的引用上。请确保在子组件的根元素上设置 ref 属性，并且正确地传递 el 对象。

首先，请确认在子组件的模板中，将 ref 属性应用在根元素上，例如：


<!-- 子组件模板 -->
<template>
  <div ref="childRef">
    <!-- 其他子组件内容 -->
  </div>
</template>

接下来，在父组件中，您需要修改 addRefs 函数的定义，以传递正确的 el 对象给 refs。同时，建议使用响应式的 reactive 对象代替普通对象来存储子组件的引用。

<!-- 父组件模板 -->
<template>
  <div v-for="(item, index) in items" :key="item.id">
    <Child :ref="(el) => addRefs(el, item.id)"></Child>
  </div>
</template>

<script lang="ts" setup>
  import { reactive } from 'vue';
  import Child from './Child.vue';

  const refs = reactive({});

  const addRefs = (el, id) => {
    console.log(`print_1: ${JSON.stringify(el)}`);
    refs[id] = el;
  };

  onUpdated(() => {
    console.log(`print_2: ${JSON.stringify(refs['123'])}`);
  });
</script>

通过上述修改，再次运行代码，应该可以正确获取 el 对象并将其添加到 refs 列表中。请注意，确保子组件中的根元素正确设置了 ref 属性，并在父组件中使用 reactive 创建响应式的 refs 对象。

结合GPT给出回答如下请题主参考
在 Vue3 中可以通过 $refs 对象来访问组件的引用。在循环中使用 :ref 指令可以为每个子组件指定一个引用名，这样就可以通过 $refs 对象来获取对应子组件的实例。下面是一种可能的实现方式：

<template>
  <div>
    <child-component v-for="item in items" :key="item.id" :ref="(el) => addRefs(el, item.id)">
      <!-- 在这里传递子组件需要的数据 -->
    </child-component>
  </div>
</template>

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

export default {
  setup() {
    // 定义保存子组件引用的 refs 对象
    const childRefs = ref({});

    // 添加子组件引用到 refs 对象中
    function addRefs(el, id) {
      childRefs.value[id] = el;
    }

    return {
      childRefs,
      items: [/* 子组件需要展示的数据 */],
    };
  },
};
</script>

在上面的代码中，我们定义了一个 childRefs 变量来保存所有子组件的引用，它的值是一个初始化为空对象的 ref 对象。在 addRefs 方法中，将每个子组件的引用对象存储在 childRefs.value 对象中，以子组件的 id 作为 key。在模板中，我们通过 :ref 指令为每个子组件指定一个引用名，并将子组件的 id 作为参数传递给 addRefs 方法。最后，我们可以在代码中使用 childRefs.value[id] 来访问对应子组件的实例，从而获取子组件中的信息。

【以下回答由 GPT 生成】

问题的关键在于如何在Vue3中循环中获取子组件的引用。根据提供的代码示例和需求，我将给出具体的解决方案。

首先，需要理解Vue3中循环中获取子组件引用的过程。在循环中，可以通过:ref属性来设置子组件的引用，然后通过回调函数来获取子组件实例并处理。

下面是解决问题的具体步骤：

  1. 在子组件的模板中，添加一个具有ref属性的容器元素，以便在父组件中设置引用。例如，在子组件模板中添加一个div元素，并设置ref="childRef"属性。
  2. 在子组件的脚本中，导入defineExpose函数，并在defineExpose函数内部暴露一个名为fx的函数。这样，父组件就可以通过子组件实例来调用该函数了。
  3. 在父组件的模板中，使用v-for指令来循环展示子组件列表。在子组件元素上使用:ref属性，并通过回调函数来获取子组件实例并处理。例如，:ref="(el) => addRefs(el, item.id)"。
  4. 在父组件的脚本中，创建一个响应式的ref对象，用于保存子组件的引用。例如，const refs = ref({})。
  5. 在父组件的脚本中，实现addRefs函数，该函数用于接收子组件实例和id，并将子组件引用添加到refs对象中对应的id属性上。
  6. 在父组件的脚本中，在页面渲染完毕时（onUpdated生命周期钩子）打印假设条件id=123的子组件引用。例如，console.log(print_2: ${JSON.stringify(refs.value[123])})。
  7. 在父组件的脚本中，通过子组件实例调用子组件暴露的fx函数，以满足最后一个需求。

下面是完整的代码示例：

<!-- 子组件 -->
<template>
  <div ref="childRef">
    ...
  </div>
</template>

<script lang="ts" setup>
  import { defineExpose } from 'vue';

  const fx = () => {
    // 子组件逻辑
  }

  defineExpose({ fx });
</script>

<!-- 父组件 -->
<template>
  <div v-for="(item, index) in items" :key="item.id">
    <Child :ref="(el) => addRefs(el, item.id)"></Child>
  </div>
</template>

<script lang="ts" setup>
  import { ref, onUpdated } from 'vue';
  import Child from './Child.vue';

  const refs = ref({});

  const addRefs = (el, id) => {
    console.log(`print_1: ${JSON.stringify(el)}`);
    refs.value[id] = el;
  }

  onUpdated(() => {
    console.log(`print_2: ${JSON.stringify(refs.value[123])}`);
    refs.value[123].fx(); // 调用子组件的fx函数
  });
</script>

请注意，上述代码中的vue和Child的导入语句可能需要根据实际情况进行调整。

以上就是在Vue3中循环中获取子组件引用的解决方案。请根据具体的需求和代码进行适当的调整。如果还有其他问题，请随时追问。


如果你已经解决了该问题, 非常希望你能够分享一下解决方案, 写成博客, 将相关链接放在评论区, 以帮助更多的人 ^-^

该回答通过自己思路及引用到GPTᴼᴾᴱᴺᴬᴵ搜索,得到内容具体如下：
在Vue 3中，你可以通过使用onMounted生命周期钩子来获取子组件的引用。onMounted钩子会在组件挂载到DOM后调用，确保在访问DOM元素之前已经进行了组件的更新和渲染。

以下是修改后的代码示例：

<template>
  <div v-for="(item, index) in items" :key="item.id">
    <Child :ref="(el) => addRefs(el, item.id)"></Child>
  </div>
</template>

<script>
import Child from './Child.vue';

export default {
  components: {
    Child
  },
  setup() {
    const refs = ref({})

    const addRefs = (el, id) => {
      console.log(`print_1: ${JSON.stringify(el)}`); // 打印结果：{}
      refs[id] = el;
    }

    onUpdated(() => {
      // 假设：id = 123
      console.log(`print_2: ${JSON.stringify(refs['123'])}`); // 打印结果：{}
    });

    return {
      addRefs,
      refs
    }
  }
}
</script>

在这个示例中，我们将addRefs函数和refs对象从模板中移动到了setup函数中，并使用ref函数创建了一个响应式的引用对象。然后，我们通过onUpdated钩子在页面更新后打印出refs['123']的值。

请注意，由于onUpdated是异步的，所以在onUpdated中使用refs时可能会在更新完成之前访问到旧的引用对象。为了避免这种情况，你可以将需要使用refs的地方移动到onMounted钩子中，这样可以确保在访问DOM元素之前已经完成了组件的更新和渲染。

如果以上回答对您有所帮助，点击一下采纳该答案～谢谢

子组件

<template>
  <div ref="childRef">
    ...
  </div>
</template>

<script setup>
  const fx = () => {
    // 子组件的逻辑
  };

  defineExpose({ fx });
</script>

父组件

<template>
  <div v-for="(item, index) in items" :key="item.id">
    <Child v-slot="{ fx }" @hook:mounted="onChildMounted(item.id, fx)"></Child>
  </div>
</template>

<script setup>
  import Child from './Child.vue';
  import { onMounted, ref } from 'vue';

  const refs = ref({});

  const items = [
    { id: 123 },
    // 其他 items
  ];

  const addRefs = (id, el) => {
    refs.value[id] = el;
  };

  const onChildMounted = (id, fx) => {
    onMounted(() => {
      console.log(`print_1: ${JSON.stringify(refs.value[id])}`);
      fx(); // 调用子组件的 fx 函数
    });
  };
</script>

看一下这个例子

<template>  
  <div>  
    <div v-for="item in items" :key="item.id">  
      <child-component :ref="(el) => addRefs(el, item.id)"></child-component>  
    </div>  
  </div>  
</template>  
  
<script>  
import ChildComponent from './ChildComponent.vue';  
  
export default {  
  components: {  
    ChildComponent  
  },  
  data() {  
    return {  
      items: [  
        // 假设的items数据  
      ]  
    };  
  },  
  methods: {  
    addRefs(el, id) {  
      // 打印子组件对象信息  
      console.log('print_1:', el);  
      // 向refs数组添加子组件引用  
      this.$refs[id] = el;  
    }  
  },  
  updated() {  
    // 打印指定id的子组件引用  
    console.log('print_2:', this.$refs['123']);  
    // 通过子组件实例调用暴露的函数  
    this.$refs['123'].fx();  
  }  
};  
</script>

参考gpt4：
结合自己分析给你如下建议：
您没有正确地使用ref属性来获取子组件实例。您需要确保您使用的是ref属性，而不是:ref属性，因为:ref属性是一个动态绑定的属性，它会将表达式的值作为ref的名称，而不是将表达式本身作为ref的回调函数。
您没有正确地使用defineExpose方法来暴露子组件实例的属性和方法。您需要确保您在子组件中使用defineExpose方法，并传入一个对象，该对象包含了您想要暴露给父组件的属性和方法。您还需要确保您在父组件中使用了正确的类型注解，以便让TypeScript知道子组件实例的类型。
您没有正确地处理子组件实例的生命周期。您需要注意，子组件实例可能在父组件中还没有完全创建或渲染出来，所以在某些生命周期钩子中，您可能无法获取到子组件实例或其属性和方法。您可以使用onMounted或onUpdated等钩子来确保子组件实例已经可用。

vue3中如何获取子组件的数据或调用其方法


https://wenku.baidu.com/view/3f1623be75eeaeaad1f34693daef5ef7bb0d1208.html?_wkts_=1694483132560&bdQuery=Vue3+%E4%B8%AD%E6%80%8E%E6%A0%B7%E5%9C%A8%E5%BE%AA%E7%8E%AF%E4%B8%AD%E8%8E%B7%E5%8F%96%E5%AD%90%E7%BB%84%E4%BB%B6%E7%9A%84%E5%BC%95%E7%94%A8