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'},
]);

참고자료: Vue3 완벽 마스터: 기초부터 실전까지 - “기본편”

소스코드 바로확인하기

댓글 쓰기

pinia기본

May 05 2023

pinia pinian 기본 기록용

아파트 살 수 있을까? 부동산은 고점인가 저점인가

April 17 2023

PIR이란 PIR이란 전국 가구당 소득 대비 아파트 가격을 말한다. PIR을 통해 현재 부동산의 가격이 적절한가 알아보자

github pages에서 vue router 404 에러

April 03 2023

배경1. vue 프로젝트를 github pages를 통해 myurl.com에 배포를 했다 배경2. vue router를 사용하여 myurl.com/posts 페이지가 있다 배경3. vue router의 history모드는 createWebHistory를 사용한다 myurl.co...

object의 변수인 경우 ref와 reactive 어느 것을 사용할까

April 02 2023

object변수는 ref와 reactive 중 어떤 것으로 선언해야할까 각각의 장단점이 있다 확인해보자

props

props

자식 component

부모 component

Javascript

Frontend

Vue

댓글 쓰기

You may also enjoy

pinia기본

아파트 살 수 있을까? 부동산은 고점인가 저점인가

github pages에서 vue router 404 에러

object의 변수인 경우 ref와 reactive 어느 것을 사용할까