81일차

• 뷰 공부
• API공부
• 노션페이지 만들기 by vue 복습
• UI1강

새로 배운 내용

1. props를 이용한 Badge컴포넌트

BadgeList.vue

<li>
  <BaseBadge
     type="admin"
     caption="ADMIN" />
</li>
<li>
  <BaseBadge
     type="admin"
     caption="AUTHOR" />
</li>

BaseBadge.vue

<template>
  <span
    class="badge"
    :class="classes">{{ caption }}</span>
</template>

<script>
export default {
  props: ['type', 'caption'],
  computed: {
    classes() {
      return {
        'badge--admin': this.type === 'admin',
        'badge--author': this.type === 'author',
      }
    },
  },
}
</script>

2. slot을 이용한 컴포넌트 활용

2-1 {{}}를 이용한 경우 발생할 수 있는 문제점

BaseCard.vue

<template>
  <div>
    {{content}}
  </div>
</template>

<script>
export default {
  props: ['content']
}
</script>

<style scoped>
div {
  margin: 2rem auto;
  max-width: 30rem;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.26);
  padding: 1rem;
}
</style>

UserInfor.vue

<BaseCard>
  <div>
    <h3>{{ fullName }}</h3>
    <BaseBadge
         :type="role"
         :caption="role.toUpperCase()" />
  </div>
  <p>{{ infoText }}</p>
</BaseCard>

<script>
import BaseCard from '~/components/BaseCard.vue'
import BaseBadge from '~/components/BaseBadge.vue'
export default {
  components: {
    BaseCard,
    BaseBadge
  },
  props: ['fullName', 'infoText', 'role'],
}
</script>

<style scoped>
section {
  margin: 2rem auto;
  max-width: 30rem;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.26);
  padding: 1rem;
}

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

content가 적용되는 부분을 찾지 못하기 떄문에 스타일이 적용되지 않습니다. 이런 경우 slot을 이용해 해결을 할 수 있습니다.

2-2 slot이용

BaseCard.vue

<template>
  <div>
    <slot></slot>
  </div>
</template>

slot을 적용하면 문제 없이 적용이 되며 UserInfor.vue 컴포넌트의 section스타일을 제거해도 BaseCard스타일이 상속되어 적용이 되게 됩니다.