如何使用Vue具名插槽渲染多<li>静态内容？无需作用域插槽

当然可以不用作用域插槽搞定这个需求！核心思路是在组件模板中为每个需要渲染的内容单独包裹<li>标签，直接利用Vue的具名插槽系统传递纯HTML内容，完全不需要把静态内容塞进prop里。

方式一：固定数量的具名插槽（适合已知插槽数量的场景） #

先定义你的comp组件模板，为每个具名插槽单独套上<li>，同时判断插槽是否存在，避免生成空标签：

<template>
  <ul>
    <li v-if="$slots.navItem1">
      <slot name="navItem1"></slot>
    </li>
    <li v-if="$slots.navItem2">
      <slot name="navItem2"></slot>
    </li>
    <!-- 按需扩展更多具名插槽 -->
  </ul>
</template>

然后在父组件中，通过具名插槽分别传入锚点内容：

<template>
  <comp>
    <template #navItem1>
      <a href="#home">首页</a>
    </template>
    <template #navItem2>
      <a href="#about">关于我们</a>
    </template>
    <!-- 继续添加更多导航项插槽 -->
  </comp>
</template>

方式二：动态遍历插槽（适合不确定插槽数量的场景） #

如果你的插槽数量不固定，可以直接遍历组件的$slots对象，自动为每个插槽生成<li>：

<template>
  <ul>
    <li v-for="(slotContent, slotName) in $slots" :key="slotName">
      <slot :name="slotName"></slot>
    </li>
  </ul>
</template>

父组件使用时，随便传多少个具名插槽都可以，每个插槽的内容都会自动被包裹在独立的<li>里：

<template>
  <comp>
    <template #item1>
      <a href="#section1">Section 1</a>
    </template>
    <template #item2>
      <a href="#section2">Section 2</a>
    </template>
    <template #item3>
      <a href="#section3">Section 3</a>
    </template>
  </comp>
</template>

为什么这个方案可行？ #

Vue的插槽系统本身就支持将父组件的内容分发到子组件的指定位置，你的内容是纯静态HTML，完全不需要作用域插槽的“数据传递”能力——我们只需要利用插槽的内容分发特性，让每个插槽对应一个<li>容器即可。

内容的提问来源于stack exchange，提问作者Stvyu