📚 이번 포스팅에서는 props와 emit에 대해서 알아보도록 하자.
1. Props
부모 컴포넌트로부터 자식 컴포넌트로 데이터를 전달하는데 사용되는 속성
1) Props 특징
-
부모 속성이 업데이트되면 자식으로 전달되지만 그 반대는 전달이 안된다.
-
자식 컴포넌트에서 props를 변경하려고 시도해서는 안되며 불가능하다.
-
부모 컴포넌트가 업데이트될 때마다 이를 사용하는 자식 컴포넌트의 모든 prop가 최신 값으로 업데이트 됨
-
모든 prop는 자식 속성과 부모 속성 사이에 하향식 단방향 바인딩을 형성 (one-way-down binding)
2) Props 선언
부모 컴포넌트에서 내려 보낸 props를 사용하기 위해서는 자식 컴포넌트에서 명시적인 props 선언이 필요하다.
3) Props 선언 2가지 방법
"문자열 배열"을 사용한 선언 :
배열의 문자열 요소로 props 선언,
문자열 요소의 이름은 전달된 props의 이름
"객체"를 사용한 선언
각 객체 속성의 키가 전달받은 props 이름이 되며, 객체 속성의 값은 값이 될 데이터의 타입에 해당하는 생성자 함수(Number, String...) 이어야함
4) Props Name Casing
자식 컴포넌트로 전달시에는
kebab-case를 사용
선언 및 템플릿 참조 시에는
camelCase를 사용
5) Dynamic props
v-bind를 사용하여 **동적으로 할당된 props를 사용할 수 있다.
<ParentChild my-msg="message" :dynamic-props="name" />2. $emit()
자식 컴포넌트가 이벤트를 발생시켜 부모 컴포넌트로 데이터를 전달하는 역할의 메서드
$emit(event, ...args)-
event : 커스텀 이벤트 이름
-
args : 추가 인자
1) 이벤트 발신 및 수신
<button @click="$emit('someEvent')">클릭</button>$emit을 사용하여 템플릿 표현식에서 직접 사용자 정의 이벤트를 발신
<ParentComp @some-event="someCallback" />그런 다음 부모는 v-on을 사용하여 수신할 수 있음
<!--ParentChild.vue-->
<button @click="$emit('someEvent')">클릭</button>ParentChild에서 someEvent라는 이름의 사용자 장의 이벤트를 발신
<!-- Parent.vue -->
<ParentChild @some-event="someCallback" my-msg="message" :dynamic-props="name" />const someCallback = function () {
console.log('이벤트를 수신했습니다.')
}ParentChild의 부모 Parent는 v-on을 사용하여 발신된 이벤트를 수신한 후에 처리할 로직 및 콜백함수 호출
2) emit 이벤트 선언
-
defineEmits()를 사용하여 발신할 이벤트를 선언
-
props와 마찬가지로 defineEmits()에 작성하는 인자의 데이터 타입에 따라 선언 방식이 나뉨(배열, 객체)
-
defineEmits()는 $emit 대신 사용할 수 있는 동등한 함수를 반환(script에서는 $emit 메서드를 접근할 수 없기 때문에)
