将类绑定到 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 中甚至在技术上可以做这样的事情吗？

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

原文由 Matúš Čongrády 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

使用 vuejs2 插槽样式已被删除 ， 如下所述：

通过命名插入的内容不再保留 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>

原文由 Saurabh 发布，翻译遵循 CC BY-SA 4.0 许可协议

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>

use _class to class keyword , so Vue.js will let _class as the common property.

然后在您的使用中：

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

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

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

原文由 tomision 发布，翻译遵循 CC BY-SA 3.0 许可协议