props

props란 부모component가 자식component에게 data를 전달하는 것

자식 component

자식component를 AppCard.vue로 정의 html

<template>
  <div>
    <p>
      {{ $props }} <!--$로도 마크업으로 표현가능-->
    </p>
    <span>{{ type == 'news' ? '뉴스' : '공지사항'}}</span> <!--computed로 표현가능-->
    <h2>
      {{ title }}
    </h2>
    <p>
      {{ contents }}
    </p>
    <p :class="isLikeClass"> <!--computed 사용-->
      좋아요
    </p>
  </div>
</template>

  <script setup>
    const props = defineProps({
      type: {
        type: String,
        default: 'news',
        validator: value => {
          return 'undefined' || ['news', 'notice'].includes[value];
        }, //선언이 안되어도 가능하지만 선언할 경우 news나 notice만 가능하다
      },
      title: String,
      contents: String,
      isLike: {
        type: Boolean
      }
    });
    
    const isLikeClass = computed(() => props.isLike ? 'btn-good': 'btn-bad');
  </script>

css

div{
  margin-bottom: 40px;
  border: 10px solid;
}

.btn-good{
  background: red;
}

.btn-bad{
  background: green;
}

부모 component

부모component를 TheView.vue로 정의

html

<!-- 직접 값넣기 -->
<AppCard title="제목1" contents="내용1"></AppCard>

<!-- 객체의 필드값 사용 -->
<AppCard :title="post1.title" :contents="post1.contents" :isLike="post1.isLike"></AppCard>

<!-- 객체 사용 -->
<AppCard v-bind="post3"></AppCard>

<!-- 객체+반복문 -->
<div v-for = "post in posts" :key="post.id">
  <AppCard
            :title="post.title"
            :contents="post.contents"
            :type="post.type"
            :isLike="post.isLike"
            ></AppCard>
</div>

const post1 = {
  title: '제목2',
  contents: '내용2',
  isLike: true,
}

const post3 = {
  title: '제목3',
  contents: '내용3',
  isLike: true,
  type: "notype",
}

const posts = reactive([
  {title:'제목4', contents:'내용4', isLike:false, type:'notice'},
  {title:'제목5', contents:'내용5', isLike:false, type:'notice'},
]);