-
질문 & 답변
카테고리
-
세부 분야
프론트엔드
-
해결 여부
미해결
자식 컴포넌트의 스타일을 부모 컴포넌트에서 수정할 때에 대한 질문
22.05.07 21:51 작성 조회수 147
1
안녕하세요!
캡틴판교님의 강의를 전부 수강하고 또 새로운 강의를 기다리고 있는 1인입니다.
바로 질문들어가겠습니다
최근에 고민중인게 다양한 화면에서 쓸 수 있게 만든 컴포넌트를 만들었지만, 화면에 따라 디자인이 조금씩 달라져서 그걸 각각 부모에서 조정하지 않으면 안되는 상황일 때,
캡틴판교님은 부모에서 자식 컴포넌트에 따로 class를 붙여서 디자인을 조정해 주시나요?
저는 따로 클래스를 붙이지 않고 그 자식컴포넌트의 루트태그에 붙여놓은 클래스를 바로 이용해서 합니다. 예를들면
bookThumbnailLink라는 컴포넌트가 있고
<template>
<nuxt-link class="book-thumbnail-link" :class="styles" :to="to">
<book-thumbnail :size="size" :src="src" :loading="loading" :alt="alt" />
</nuxt-link>
</template>
<script>
import { defineComponent, computed } from '@nuxtjs/composition-api'
import BookThumbnail from '@/components/BookThumbnail.vue'
export default defineComponent({
components: {
BookThumbnail,
},
props: {
},
setup(props) {}
<style lang="scss" scoped>
.book-thumbnail-link {
display: inline-flex;
flex-direction: column;
text-decoration: none;
}
</style>
위의 bookThumbnailLink의 리스트인 bookThumbnailLinkList 컴포넌트에서 자식 컴포넌트의 스타일을 수정할 때 book-thumbmail-link라는 클래스를 바로 이용하는 방법입니다.
<template>
<div class="book-thumbnail-link-list">
<BookThumbnailLink
v-for="(book, i) in bookList"
></BookThumbnailLink>
</div>
</template>
<script>
import { defineComponent } from '@nuxtjs/composition-api'
import BookThumbnailLink from './BookThumbnailLink.vue'
export default defineComponent({
components: {
BookThumbnailLink,
},
setup() {},
})
</script>
<style lang="scss" scoped>
.book-thumbnail-link-list {
display: flex;
.book-thumbnail-link {
display: flex;
}
}
</style>
주위에 조언을 구할만한 곳이 없어서 질문드립니다!! 혹시 어떻게 부모에서 자식컴포넌트의 스타일을 수정하시나요?
답변을 작성해보세요.
1
장기효(캡틴판교)
지식공유자2022.05.09
안녕하세요 굿뜨님, 좋은 질문이네요. 부모에서 자식 컴포넌트의 스타일이나 클래스를 제어하기 위해서는 props 속성이나 slot을 사용하시면 됩니다 :)
답변 1