Vues - 如何在渲染函数中使用 v-for 和作用域槽

Question

我有一个呈现导航链接的组件。它基于 scopedSlots 功能。该组件工作正常，但我想改进它。这是它目前的使用方式：

<horizontal-navigation :items="items" #default="{ item }">
  <navigation-item :item="item"></navigation-item>
</horizontal-navigation>

items 的数组如下所示：

[
  { path: '/about', title: 'About' },
  { path: '/', title: 'Home' }
]

这是 HorizontalNavigation 组件模板：

<template>
    <div class="horizontal-navigation">
      <slot v-for="(item, index) in items" :key="index" :item="item"></slot>
    </div>
</template> -->

这是 NavigationItem 组件模板

<template>
    <router-link class="navigation-item" :path="item.path">{{ item.title }}</router-link>
</template>

我正在尝试用 render 函数替换 HorizontalNavigation 组件的模板，因为我想让这个组件在没有插槽时使用默认样式呈现链接内容已提供。

这是我卡住的地方：

  render () {
    const options = {
      class: 'horizontal-navigation'
    }
    let children = []
    if (this.$slots.default) {
      children = this.$slots.default({ items: this.items }) // NEED TO ITERATE ITEMS TO CREATE INSTANCES OF A COMPONENT PASSED TO DEFAULT SLOT
    }
    return h('div', options, children)
  }

我在文档中找到的最接近的内容是：

render() {
  if (this.items.length) {
    return Vue.h('ul', this.items.map((item) => {
      return Vue.h('li', item.name)
    }))
  } else {
    return Vue.h('p', 'No items found.')
  }
}

有什么建议吗？

Answer 1

在模板中尝试使用条件渲染来渲染 slot 或后备内容 :

 <div class="horizontal-navigation">
   <template  v-for="(item, index) in items" >
       <template v-if="$slots.default">
           <slot  :item="item"></slot>
       </template>
       <template v-else>
          <router-link class="navigation-item" :path="item.path">{{ item.title }}</router-link>
       </template>         
   </template>
</div>

Vues - 如何在渲染函数中使用 v-for 和作用域槽

Vues - How to use v-for and scoped slots in render function

vue.js

vue-component

vue-router

vuejs3