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

【问题标题】：Using v-for inside component that uses <slot/>在使用 <slot/> 的组件内部使用 v-for
【发布时间】：2022-01-16 04:31:26
【问题描述】：

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

<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 完成什么的，我尝试在 StackOverflow 上搜索但没有找到任何相关内容。

【问题讨论】：

标签： vue.js vuejs3

【解决方案1】：

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

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

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

【讨论】：

谢谢，slots.default()[0].children 帮了我一把。