将类绑定到Vue.js中的插槽2

Question

我正在尝试创建一个可重用的组件来迭代项目,过滤它们,并向插槽中添加一些类(如果项目是偶数,奇数,第一,最后等...)

这是我的可重用组件:

<template>
  <ul :class="classes">
    <slot
      v-for="(item, index) in filteredItems"
      :item="item"
      :class="{
        'first': index == 0,
        'odd': !(index % 2),
        'even': index % 2,
        'last': index == (filteredItems.length - 1)
      }"
    >
    </slot>
  </ul>
</template>

<script>
export default {
  props: ['items', 'classes'],
  data() {
    return {
      filteredItems: this.items.filter(item => item.active)
    };
  }
};
</script>

以下是我如何使用它:

<component-list :classes="'some-class'" :items="category.products">
  <template scope="props">
    <product :product="props.item"></product>
  </template>
<component-list>

一切都按预期工作,但它不会向放在里面的元素添加类.

我做错了吗？在Vue.js 2中技术上是否可以做这样的事情？

感谢您的任何帮助或建议!

Answer 1

随着vuejs2从槽的造型已被删除的规定在这里:

通过named插入的内容不再保留slot属性.使用包装器元素对其进行样式化,或者对于高级用例,使用呈现函数以编程方式修改插入的内容.

所建议的最简单的方法是使用如下的包装元素:

<template>
  <ul :class="classes">
    <slot>
      <div
      v-for="(item, index) in filteredItems"
      :item="item"
      :class="{
        'first': index == 0,
        'odd': !(index % 2),
        'even': index % 2,
        'last': index == (filteredItems.length - 1)
      }"
    >
    </div>
    </slot>
  </ul>
</template>

Answer 2

我还有一个办法可以达到你的目的，但是不用render，还是用slot。

可重用组件：

<template>
  <ul :class="classes">
    <slot
      v-for="(item, index) in filteredItems"
      :item="item"
      :_class="{
        'first': index == 0,
        'odd': !(index % 2),
        'even': index % 2,
        'last': index == (filteredItems.length - 1)
      }"
    >
    </slot>
  </ul>
</template>

<script>
export default {
  props: ['items', 'classes'],
  data() {
    return {
      filteredItems: this.items.filter(item => item.active)
    };
  }
};
</script>

使用_classtoclass关键字，因此Vue.js将 let_class作为公共属性。

然后在你的使用中：

<component-list :classes="'some-class'" :items="category.products">
  <template scope="{ item, _class }">
    <product :product="item" :class="_class"></product>
  </template>
<component-list>

通过范围属性，您仍然可以_class从插槽中获取。

毕竟使用起来render可能更加简洁。:)