자식 컴포넌트의 스타일을 부모 컴포넌트에서 수정할 때에 대한 질문
미해결
Vue.js 끝장내기 - 실무에 필요한 모든 것
안녕하세요! 캡틴판교님의 강의를 전부 수강하고 또 새로운 강의를 기다리고 있는 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 > 주위에 조언을 구할만한 곳이 없어서 질문드립니다!! 혹시 어떻게 부모에서 자식컴포넌트의 스타일을 수정하시나요?
- 아토믹디자인
- vuejs
- vuex
- javascript