inflearn logo
강의

강의
N
챌린지

챌린지
멘토링

멘토링
N
클립

클립
로드맵

로드맵
지식공유

Vue.js 끝장내기 - 실무에 필요한 모든 것

학습 내용 정리 및 향후 학습 로드맵 안내

자식 컴포넌트의 스타일을 부모 컴포넌트에서 수정할 때에 대한 질문

295

박굿뜨

작성한 질문수 25

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>

주위에 조언을 구할만한 곳이 없어서 질문드립니다!!  혹시 어떻게 부모에서 자식컴포넌트의 스타일을 수정하시나요?

아토믹디자인 vuejs vuex javascript

답변 1

1

캡틴판교

안녕하세요 굿뜨님, 좋은 질문이네요. 부모에서 자식 컴포넌트의 스타일이나 클래스를 제어하기 위해서는 props 속성이나 slot을 사용하시면 됩니다 :)

node 10버전 사용

0

87

1

강의에 대해 질문 드립니다.

0

78

1

vue CLI 대신 vite를 사용해도

1

169

2

질문삭제

0

172

2

강사님 코드로 진행할 경우 console.log( config); 도 안찍혔어요. instance 를 생성해서 공통으로 사용하셨는데 loginUser 에만 커스텀한 instance를 넣으니 콘솔에 컨피그 객체가 찍혀요

0

105

1

로그인 에러발생만하면 네트워크 커넥션 에러 발생 해결

0

130

1

rndrmagkqslek.

0

79

1

계속 따라하다가 안돼서 bash에 연결할떄 안되더라구요

0

110

1

axios 에러가 뜹니다.

1

250

2

vue3로 진행하시면서 router에서 '*' 적용이 안되시는 분들

2

324

1

vue 관련 다른 강의 출시예정이없으신지 궁금합니다!

1

159

1

AppHeader.vue에 vue 디폴트 만들에 Delete `␍` 오류나면

1

201

1

vue3로 따라오시다가 import axios 에러 뜨시는 분들

2

463

2

$router 를 이용한 메인 페이지로 이동

1

298

1

혹시 node.js 10.24 버전으로 해도 상관없나요?

2

479

2

에러 경로가 LoginForm.vue 43번째줄 말고 다른 경로로 출력됩니다.

1

303

2

pinia 사용할려고 하는데 에러가 나옵니다.

1

498

2

swagger ui의 post/posts에 글 기록하려고 하면 unauthorized 에러가 납니다..

1

1123

2

safari 개발자 도구에 대한 질문입니다

1

581

2

스웨거에 글 등록시 401 에러가 나와요 ㅠ

1

736

2

이 에러 때문에 진행이 안되네요 ㅠ

1

680

1

windows .nvmrc nvm use 실행 오류

1

1565

2

강사님 최신화가 필요해보입니다.

2

967

2

npm i 에러

1

626

1