如何将变量 prop 绑定到 v-for 插槽

Question

我正在尝试创建一个列表组件，它呈现一个路由器链接列表，其中每个路由器链接都有一个作用域插槽。 router-link 的 to-prop 应该由 parent 配置。

父组件应该可以配置router-link的to-prop，而不必自己实现router-link。或者如果它必须自己实现路由链接，列表组件应该能够将类传递给每个路由链接。

我创建了一个代码笔来显示我想要解决的问题。当然，如果您对此有任何疑问或有任何不清楚的地方，请告诉我。 https://codepen.io/Buffalom/pen/KKPmJPx

这是我想要达到的目标的总结：

<router-link v-for="item in items" to="/" class="abc">
    <!-- :to should be configurable by the parent -->
    <slot :item="item"></slot>
</router-link>

我希望父级能够呈现具有给定项目数组的列表，但将每个路由器链接配置为自身。

更新

我想在父组件中采用这样的理想方式：

<List :items="items" :to="`/1/${item.name}`">
    ...

作为 to-prop 中的项目，items 中的每个项目都将用于列表组件本身的 v-for router-link。有点像反向作用域插槽...^^

Answer 1

这就是你要找的吗？您只需要将to 设为动态道具。

<router-link v-for="item in items" :to="item.url" class="abc">
    <!-- :to should be configurable by the parent -->
    <slot :item="item"></slot>
</router-link>

更新

如果您没有网址，请查看vue-router named routes。取自文档并稍作改编：

const router = new VueRouter({
  routes: [
    {
      path: '/1/:itemName',
      name: 'item',
      component: MyItemPage
    }
  ]
})

<router-link
    v-for="item in items"
    :to="{ name: 'item', params: { itemName: item.name }}"
    class="abc"
>
    <slot :item="item"></slot>
</router-link>