如何使用 Vue 命名插槽呈现静态内容列表？

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

如果你不喜欢把你的数据放在数组中，用v-for

渲染列表

可以全部放在组件里，没有slot:

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

或插槽：

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

Answer 2

这可以通过渲染函数轻松实现。

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 的小型实用程序组件的帮助下，您可以使用模板来完成此操作。

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>

Answer 3

您可以使用 scoped slots 而不是插槽

您的 comp 组件接收一个 prop links，它是一个链接数组（因为静态初始化为 custom option）。迭代 links 并将 link 作为数据传递给插槽，就像将 props 传递给组件一样

   Vue.component("comp", {
  template: `
    <ul class="comp">
      <li class="comp-item" v-for="link in links">
          <slot v-bind="link"></slot>
      </li>
    </ul>
  `,
  props: ["links"]
})

new Vue({
  el: "#app",
  // custom static option , accessed using vm.$options.links
  links: [
      {text: "link1"},
      {text: "link2"},
      {text: "lin3"}
  ]
})

在使用 comp 组件的父级中，使用具有特殊属性 slot-scope 的 <template> 元素，表明它是作用域插槽的模板。

slot-scope 的值将用作临时变量的名称，该变量保存从子项传递的 props 对象：

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.js"></script>
<div id="app">
  <comp :links="$options.links">
      <template slot-scope="link">
          <a href="#">{{link.text}}</a>
      </template>
  </comp>
</div>

这里是working fiddle

如何使用 Vue 命名插槽呈现静态内容列表？

How to render a list of static content with Vue named slot?

javascript

components

slot

vue.js

vuejs2