[Udemy Vue 완벽가이드 Section9] 115. 슬롯 스타일 및 컴파일

슬롯은 아주 효과적인 기능이지만, 스타일링에 문제가 생겼다.

UserInfo.vue 컴포넌트에서 배지의 스타일링이 깨졌다.

이전에 UserInfo.vue 파일에서 header를 지정해서 스타일링을 적용했지만, 그 header 부분을 다른 컴포넌트인 BaseCard.vue 컴포넌트에 있는 header로 보내고있다.

<template>
  <section>
    <base-card>
      <template v-slot:header>
        <h3>{{ fullName }}</h3>
        <base-badge :type="role" :caption="role.toUpperCase()"></base-badge>
      </template>
      <template v-slot:default>
        <p>{{ infoText }}</p>
      </template>
    </base-card>
  </section>
</template>

<script scoped>
export default {
  props: ["fullName", "infoText", "role"],
};
</script>

<style scoped>
section header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>

 

header로 보낸 컨텐츠가 스타일링의 범위를 지정한 컴포넌트(style scoped)에서 정의되었기 때문에, UserInfo.vue에서 BaseCard.vue 컴포넌트로 보내진 컴텐츠도 UserInfo.vue에 있는 스타일링에 영향을 받는다고 생각할 수 있지만 Vue는 그렇게 작동하지 않는다.

 

아주 간단한 규칙이 있다.

slot을 작업할 때, 그리고 컨텐츠를 다른 컴포넌트 slot으로 보낼때 scoped 스타일, 데이터가용성, props 등에 대해 배운 것은 아무것도 바뀌지 않는다.

 

example:

UserInfo.vue에 있는 fullName 프로퍼티는 여전히 UserInfo.vue에서만 사용 가능하다. 여기 있는 마크업(h3, base-badge 태그)을 BaseCard.vue로 보내더라도 BaseCard.vue에서는 사용할 수 없다.

 

Vue.js는 다른 컴포넌트에 컨텐츠를 보내기 전에 템플릿을 분석하고 컴파일하여 평가한다.

따라서, UserInfo.vue 내부에서 정의된 모든 항목에 액세스할 수 있고, 여기에 정의된 스타일링도 여기 있는 마크업에 영향을 준다.

하지만, 컨텐츠를 보내는 컴포넌트의 마크업에는 적용되지 않는다.

즉, header로 보내면 slot을 받은 BaseCard.vue에서 header 스타일링을 할 수 있지, UserInfo.vue에서는 더이상 header 스타일링이 불가능하다.

UserInfo.vue에 있는 스타일이 BaseCard.vue에 있는 header에 영향을 미치지 않는 이유이다.

 

따라서 BaseCard.vue의 header에 영향을 미치려면 BaseCard.vue 파일로 이동하여 scoped 스타일링에 header 스타일링일 추가하면 된다.

 

** h3 스타일링은 UserInfo.vue에서만 할 수 있다.

 

 

** 출처: 모든 내용은 Udemy Vue-완벽가이드 강의를 기반으로 작성하였습니다.