Vue 컴포넌트 기초

• 컴포넌트는 재사용 가능한 인스턴스이므로 data, computed, watch, methods 와 라이프사이클 훅과 같은 루트 인스턴스와 같은 옵션을 허용
• el과 같은 몇가지 루트만의 옵션은 예외

---

- Props

• 컴포넌트에 데이터 전달
• 컴포넌트에 등록할 수 있는 커스텀 속성
• 값이 prop 속성에 전달되면, 그 값은 해당 컴포넌트 인스턴스의 속성이 된다.
• 자바스크립트 표현식임을 알리려면 v-bind가 필요
• 객체의 속성 전달
  • 객체의 모든 속성을 props로 전달하려면 전달인자 없이 v-bind 사용
  • 아래 2개는 동일

  post: {
    id: 1,
    title: 'Vue와 떠나는 여행'
  }

  <blog-post v-bind="post"></blog-post>
  <blog-post v-bind:id="post.id" v-bind:title="post.title"></blog-post>

---

- 단방향 데이터 흐름

• 모든 props는 자식 속성과 부모 속성 사이에 아래로 단반향 바인딩을 형성
• 부모 속성이 업데이트되면 자식으로 흐르지만 반대 방향은 아니다.
• 부모 컴포넌트가 업데이트 될 때마다 자식 컴포넌트의 모든 prop들이 최신 값으로 새로고침 됨
• 즉, 하위 컴포넌트에서 prop를 변경하려고 시도해서는 안된다.
• 일반적으로 prop를 변경하려는 2가지 경우
  • prop는 초기 값을 전달하는데 사용. 하위 컴포넌트는 나중에 prop값을 로컬 data속성으로 사용하려고 한다.
    이 경우 prop를 초기 값으로 사용하는 로컬 data 속성을 정의하는 것이 가장 좋다.

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

  • prop는 변환해야 하는 원시 값으로 전달.
    이 경우 prop의 값을 사용하여 computed 속성을 정의하는 것이 가장 좋다.

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

 

[ 참고자료 ]

https://v3.ko.vuejs.org/guide/component-props.html#%E1%84%90%E1%85%A1%E1%84%8B%E1%85%B5%E1%86%B8-%E1%84%8E%E1%85%A6%E1%84%8F%E1%85%B3

Props | Vue.js