Programing

Vue.js 2의 슬롯에 클래스 바인딩

c10106 2022. 3. 16. 21:55
반응형

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에서 이런 일을 하는 것이 기술적으로 가능한가?

어떤 도움이나 제안이라도 고마워!

와 함께vuejs2다음과 같이 슬롯에서 스타일링이 제거됨:

이름을 통해 삽입된 콘텐츠는 더 이상 슬롯 속성을 보존하지 않는다.래퍼 요소를 사용하여 스타일을 지정하거나 고급 사용 사례의 경우 렌더 함수를 사용하여 삽입된 내용을 프로그래밍 방식으로 수정하십시오.

제안된 가장 간단한 것은 다음과 같은 포장지 요소를 사용하는 것이다.

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

다른 방법이 있어 네 목표를 잡긴 했지만 사용하지 않아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>

키워드에 사용하기 때문에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좀 더 구체적일 수 있다.:)

자식 구성 요소에서 슬롯 태그를 사용하지 않고 슬롯 데이터를 일반 요소에 바인딩하십시오.

예를 들어 내가 모달이라고 불리는 성분이 있다고 하자.우리 부모님에게는 다음과 같은 것이 있다.

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

참조URL: https://stackoverflow.com/questions/42114188/bind-class-to-a-slot-in-vue-js-2

반응형