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

您可以使用scoped slots代替广告

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

   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组件的父级中，使用带有特殊属性<template>的{{1}}元素，表明它是范围插槽的模板。

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

slot-scope

以下是working fiddle

Answer 2

如果您不想将数据放入数组，并使用v-for

呈现列表

您可以将所有这些内容放入组件中，无槽：

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

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

2 个答案: