如何使用Vue命名槽来呈现静态内容列表？ [英] How to render a list of static content with Vue named slot?

问题描述

我无法弄清楚如何让以下工作：

I have trouble figuring out how to get the following to work:

我的父模板

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

和我的组件 comp 模板看起来像以下：

and my component comp template looks like the following:

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

目前我所有的锚都转到那个 li 标签（预期）
但我希望能够为我插入的每个命名插槽生成多个 li ，如下所示：

currently all my anchors goes to that single li tag (which is expected) but I would like to be able to produce multiple li for every named slot I inserted like the following:

<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中来呈现它们。

Is there any way to achieve what I need without using scoped slot? Because my content is pure HTML so I feel it is unnecessary to put static content inside prop in order to render them.

从我所看到的，大多数vue UI框架需要你要为列表项使用另一个自定义组件，我觉得这个问题已经过时了。有没有其他方法可以做到这一点？

From what I have seen, most vue UI framework requires you to use another custom component for the list item, which I feel is over killed for the problem. Is there any other way to do this?

推荐答案

这可以通过渲染功能轻松完成。

This is easily accomplished with a render function.

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"
})

<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>

或者帮助一个小的实用程序组件来渲染vNode你可以用模板这样做。

Or with the help of a small utility component for rendering vNodes you could do it like this with a template.

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"
})

<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命名槽来呈现静态内容列表？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！