將類綁定到 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樣式：

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

使用_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可能更簡潔。 :)

Answer 3

在您的子組件中不要使用插槽標簽，只需將插槽數據綁定到普通元素即可。

例如，假設我有一個名為 modal 的組件。 在我的父母中，我有這個：

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

因此，使用普通插槽使用我的子組件將具有以下標記：

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

但是該類不會被添加。

所以我們可以這樣做：

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