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
'Programing' 카테고리의 다른 글
리액션 렌더 함수에서 빈 상태로 반환할 수 있는가? (0) | 2022.03.16 |
---|---|
Python에서 '이넘'을 어떻게 대표할 수 있을까? (0) | 2022.03.16 |
Python에서 XPath를 사용하는 방법? (0) | 2022.03.16 |
Vue.js에서 생성된 이벤트와 마운트된 이벤트 간의 차이 (0) | 2022.03.16 |
NaNs로 채워진 Numpy 행렬 만들기 (0) | 2022.03.16 |