将 class 绑定到 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 插槽中的样式已删除，如所述here：

Content inserted via named no longer preserves the slot attribute. Use a wrapper element to style them, or for advanced use cases, modify the inserted content programmatically using render functions.

最简单的建议是使用如下包装元素：

<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

在你的 child 组件中不要使用插槽标签，只需将插槽数据绑定到普通元素即可。

例如，假设我有一个名为模态的组件。在我的 parent 我有这个：

<modal>
    <h1 slot="title">My modal title</h1>
</modal>

因此，如果使用正常插槽，我的 child 组件将具有以下标记：

<slot name="title" class="this-class-will-not-get-added"></slot>

但是 class 不会被添加。

所以我们可以这样做：

<h1 class="this-class-will-get-added">{{this.$slots.title['0'].children['0'].text}}</h1>

Answer 3

我有另一种方法可以让你瞄准，但不用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>

使用_class到class关键字，所以Vue.js会让_class作为普通的属性 .

那么在你的使用中：

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

根据范围属性，您仍然可以从插槽中获得 _class。

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

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

Bind class to a slot in Vue.js 2

javascript

vue.js

vuejs2