Props
단방향 데이터 흐름
- 부모 속성이 업데이트 되면 자식으로 데이터의 업데이트가 흐름. 반대방향 X
- 하위컴포넌트에서 실수로 앱데이터 흐름을 이해하기 힘들게 만드는 상위 컴포넌트 상태 변경을 방지할 수 있는 장점
- Vue에서 하위컴포넌트에서 Prop을 변경하려면 경고가 나옴
- Prop를 변환하려면 새로운 변수에 할당해서 사용하거나 computed를 사용해서 정의하는것을 권장
- 객체 Props를 넘기면 v-bind 디렉티브를 사용해서 넘긴다.
- props를 받을 때 타입을 구분 지어준다.
1
2
3
4
5
6
7
//Ex
props: {
id: {
type: String,
default: 'Seonjae' //값이 안들어올 경우 초기값을 설정해줘야됨
}
}
Non-Prop
- style은 Prop으로 받을 수 없기 때문에 아무리 하위 컴포넌트에서 사용하려고 해도 사용이 안된다 그래서 Non-Prop이라 불리고 attrs를 사용해야되는 이유이다.
- 컴포넌트가 최상위 요소로 묶여있다면 class, style을 상속받을 수 있지만 그렇지한고 여러개의 노드로 이루어져있으면 지정하는 노드가 애매하기 때문에 아예 지정하지 않는다. 그렇기 때문에 컴포넌트는 하나의 요소로 묶는것이 중요하다.
- 하지만 따로 상속받을 수 있는 방법이 있는데 그것은 컴포넌트에서
$attrs.속성명을 사용해서 받는 방법이 있다. 여러개를 상속받는다면v-bind = "attrs"를 사용하여 모두 받을 수 있다. - 상속을 받기 싫다면 ⇒
inheritAttrs: false
양방향 데이터 흐름
- v-model을 사용해서 양방향 데이터 통신을 한다. 기본적으로는 modelValue이지만 만약 원하는 이름으로 커스텀하고 싶다면
v-model:원하는이름을 사용하면 된다.
slot
- 커스텀 컴포넌트안에 내용을 넣는다면 그 내용은 하위 컴포넌트의 slot이라는 태그안에 들어가게 된다.
- 일반 글자만 들어가는게 아니라 요소들도 들어갈 수 있다.
- 기본값은 slot안에 일반 값을 넣어주면 된다. 나중에 다른 요소나 값이 들어오면 지워짐
v-slot ⇒ #
동적 컴포넌트
- 특정 상황에 따라서 컴포넌트를 교체해주는 개념
- component 태그를 사용하고 :is의 값에 따라 컴포넌트를 바꿔주면된다.
- keep-alive를 사용해서 컴포넌트를 캐싱할 수 있다. 하지만 매번 사용하는 것은 많은 메모리를 사용할 수 있는 상황이 발생하기에 비추천하고 자주 변경되는 컴포넌트만 keep-alive를 사용하면된다.