Props

부모 컴포넌트에서 자식 컴포넌트로 데이터 전달하는 방법이다.

Props 선언

export default {
  props: ['foo'],
}

문자열 배열 형태로 작성된 prop의 리스트도 가능하고,

export default {
  props: {
    title: String,
    likes: Number
  }
}

prop에 특정 타입의 값을 넣고 싶은 경우에는 속성 이름, 타입을 포함하는 오브젝트로 선언해서 타입이 지정된 prop의 리스트를 구현할 수도 있다.

이는 컴포넌트를 읽기 좋게 문서화할 뿐 아니라, 콘솔에서도 잘못된 타입이 전달된 경우 경고를 띄워준다.

정적 vs 동적 prop 전달하기

아래와 같이 정적인 props를 전달할 수 있다.

<BlogPost title="My journey with Vue" />

또는 아래와 같이 v-bind or :를 이용해 동적인 prop을 전달할 수도 있다.

<!-- Dynamically assign the value of a variable -->
<BlogPost :title="post.title" />

<!-- Dynamically assign the value of a complex expression -->
<BlogPost :title="post.title + ' by ' + post.author.name" />

다른 값 유형 전달

숫자(Number)

<!-- 42는 정적인 값이지만, 숫자라는 것을 알려주기 위해 v-bind를 이용한다. -->
<BlogPost :likes="42" />

<!-- 변수의 값을 동적으로 할당할 수도 있다. -->
<BlogPost :likes="post.likes" />

Array, Boolean, Object도 숫자가 마찬가지로 정적인 props, v-bind를 사용한 동적 할당 두가지 모두 가능하다.

오브젝트의 속성 전달
오브젝트의 모든 속성을 전달하려면, v-bind만 작성하면 모든 속성을 prop으로 전달할 수 있다.

export default {
  data() {
    return {
      post: {
        id: 1,
        title: 'My Journey with Vue'
      }
    }
  }
}

<BlogPost v-bind="post" />

post로 작성된 것은 아래와 같이 동작한다.

<BlogPost :id="post.id" :title="post.title" />

단방향 데이터 흐름

• 모든 prop들은 부모 -> 자식으로 단방향으로 내려간다.
• 부모 속성이 변경되면 자식 속성에 전달되지만, 반대 방향으로는 안된다.
• 부모가 변경될 때마다 자식의 prop이 최신 값으로 업데이트 되므로 prop은 자식 컴포넌트에서 수정하면 안된다.

prop을 직접 변경하고 싶을 때

1. prop은 초기값만 전달하고, 자식 컴포넌트는 그 초깃값을 로컬 데이터 속성으로 활용하고 싶은 경우

export default {
  props: ['initialCounter'],
  data() {
    return {
      counter: this.initialCounter
    }
  }
}

2. 전달된 prop 형태를 바꿔야 하는 경우

export default {
  props: ['size'],
  computed: {
    normalizedSize() {
      return this.size.trim().toLowerCase()
    }
  }
}

computed를 사용해서 변경사항을 감시하고 반영된다.

오브젝트, 배열을 prop으로 전달할 경우에는 객체를 참조하게 되므로 수정을 하게 되면 자식 요소가 부모 요소의 상태를 변경을 하게 된다.