在使用 <slot/> 的组件内部使用 v-for

Question

所以我正在尝试使用 Vue 3 和插槽创建一个动态选项卡组件。我让选项卡正常工作，我有 Nav 和 NavWrapper 组件。我需要能够 v-for 在 NavWrapper 组件内使用 Nav 组件。示例：

<NavWrapper ref="selector">
   <Nav v-for="test in testFor" :key="test.name" :title="test.name" icon="bx-user">
       <Profile ref="profile" />
   </Nav>
</NavWrapper>

配置文件只是用于测试的另一个组件。

NavWrapper 模板内部。重要部分：

<div class="bottom max-h-full">
   <slot />
</div>

脚本：

setup(props, { slots }) {
    const tabTitles = ref(slots.default().map((tab) => tab.props));
    const selectedTitle = ref(tabTitles.value[0].title);

    provide("selectedTitle", selectedTitle);
    provide("tabTitles", tabTitles);
    return {
      selectedTitle,
      tabTitles,
    };
  },

错误是：

Uncaught TypeError: Cannot read properties of null (reading 'title')

我想我无法获得 v-for 项的标题我尝试手动放置普通项，v-for 项和普通项都正常工作，但 v-for 只是给出了错误.

我控制台记录了 tabTitles，这证实了我的理论。

0: {title: 'Profile', icon: 'bx-user'}
1: null

我试图将 Nav 放在模板标签中，但同样的错误。

我想我需要等待 v-for 完成或其他什么，我尝试在 Whosebug 上搜索但没有找到任何相关内容。

Answer 1

似乎在渲染 v-for 时，Vue 3 模板编译器隐式地将所有生成的元素包装到 Fragment 元素中。

您可以检查 this example - 特别是 App.vue 的 JS 选项卡（生成的渲染函数）以及控制台（我在其中记录 default() 插槽的内容）

所以你的标签不在 slots.default() 的根目录，而是在 slots.default()[0].children

在使用 <slot/> 的组件内部使用 v-for

Using v-for inside component that uses <slot/>

vue.js

vuejs3