如何使用名为Vue的slot呈现静态内容列表？

Question

我在弄清楚如何使以下各项工作方面遇到困难：

我的父母模板

<comp>
  <a href="#" slot="links>link 1</a>
  <a href="#" slot="links>link 2</a>
</comp>

我的组件comp模板如下所示：

<ul class="comp">
  <li class="comp-item"><slot name="links"></slot></li>
</ul>

目前，我所有的定位li标记都转到了单个标记（这是预期的），但是我希望能够为li插入的每个命名插槽生成多个标记，如下所示：

<ul class="comp">
  <li class="comp-item"><a href="#" slot="links>link 1</a></li>
  <li class="comp-item"><a href="#" slot="links>link 2</a></li>
</ul>

有什么方法可以在不使用作用域插槽的情况下实现我所需要的？因为我的内容是纯HTML，所以我觉得没有必要将静态内容放入prop中以进行呈现。

从我所看到的情况来看，大多数vue UI框架都要求您为列表项使用另一个自定义组件，我觉得这个问题已被淘汰。还有其他方法吗？

Answer 1

使用渲染功能可以轻松实现这一点。

Vue.component("comp", {
  render(h){
    let links = this.$slots.links.map(l => h('li', {class: "comp-item"}, [l]))
    return h('ul', {class: 'comp'}, links)
  }
})

这是一个工作示例。

Vue.component("comp", {
  render(h){
    let links = this.$slots.links.map(l => h('li', {class: "comp-item"}, [l]))
    return h('ul', {class: 'comp'}, links)
  }
})

console.clear()

Vue.component("comp", {
  render(h){
    let links = this.$slots.links.map(l => h('li', {class: "comp-item"}, [l]))
    return h('ul', {class: 'comp'}, links)
  }
})

new Vue({
  el: "#app"
})

或借助用于渲染vNode的小型实用程序组件，您可以使用模板来做到这一点。

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.js"></script>
<div id="app">
  <comp>
    <a href="#" slot="links">link 1</a>
    <a href="#" slot="links">link 2</a>
  </comp>
</div>

Vue.component("vnode", {
  functional: true,
  render(h, context){
    return context.props.node
  }
})

Vue.component("comp", {
  template: `
    <ul class="comp">
      <li class="comp-item" v-for="link in $slots.links"><vnode :node="link" /></li>
    </ul>
  `
})

new Vue({
  el: "#app"
})