web-dev-qa-db-ja.com

クラスをVue.js 2のスロットにバインドします

アイテムを繰り返し処理し、フィルタリングし、クラスをスロットに追加するための再利用可能なコンポーネントを作成しようとしています（アイテムが偶数、奇数、最初、最後などの場合）

再利用可能なコンポーネントは次のとおりです。

<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では、このようなことを技術的にも可能ですか？

助けや提案をありがとう！

javascriptvue.jsvuejs2
13
Matúš Čongrády

vuejs2スロットからのスタイリングは前述のとおり削除されました here ：

Namedを介して挿入されたコンテンツは、スロット属性を保持しなくなりました。ラッパー要素を使用してスタイルを設定するか、高度な使用例では、レンダリング関数を使用して、挿入されたコンテンツをプログラムで変更します。

提案されているように最も簡単なことは、次のようにラッパー要素を使用することです。

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

私はあなたの目的を達成できる別の方法を持っていますが、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を使用すると、より簡潔になります。 :)

1
TomIsion

子コンポーネントでは、スロットタグを使用せず、スロットデータを通常の要素にバインドするだけです。

たとえば、モーダルというコンポーネントがあるとします。私の親にはこれがあります：

<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>
0
Felix Eve