Vue 不使用 v-for 获取 vNode 渲染元素数组的模板引用

Question

我正在创建一个库，我做无渲染组件，只渲染插槽中的任何内容。为了演示，我添加了虚拟 VNodes 数组。

<template>
    <component
      v-for="vnode of vnodes"
      :key="vnode.toString()"
      :is="vnode"
      ref="elements"
    />
</template>

<script setup>
import { ref, h, onMounted } from "vue";

const elements = ref([]);

const vnodes = [
  h(
    "div",
    {
      class: "foo"
    },
    "Hello One!"
  ),
  h(
    "div",
    {
      class: "bar"
    },
    "Hello Two!"
  )
];

onMounted(() => {
  console.log(elements.value[0]); 
// expected: First element of array (Element)
// reality: undefined
});
</script>

CodePen repro

在我的用例中，我从插槽中获取 VNode，然后通过模板中的 <component> 渲染它。它呈现正确，但是我无法在 onMounted() 处获得对呈现元素的引用。有谁知道这种方法有什么问题，还是 Vue 的错误？

Answer 1

我已经在 codepen 中尝试过了，我也认为这就是你应该在 vue 3 中做的。（Vue.js 第 3 版的最佳实践）

Functional Template Refs

:ref="(el) => elements.push(el)"

而不是

ref="elements"

如果您遇到数组重复问题，您可能需要在 vue lifecycle hooks

中重置数组

Vue 不使用 v-for 获取 vNode 渲染元素数组的模板引用

Vue does not get template ref of vNode-rendered elements array with v-for

vue.js

vue-component