-
Vue 컴포넌트 기초Vue/Component 2021. 6. 20. 12:59
- 컴포넌트는 재사용 가능한 인스턴스이므로 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() } }
- prop는 초기 값을 전달하는데 사용. 하위 컴포넌트는 나중에 prop값을 로컬 data속성으로 사용하려고 한다.
[ 참고자료 ]