21. Events

 

 

Events

자식 컴포넌트에서도 부모 컴포넌트로 데이터를 전달 또는 트리거의 목적으로 이벤트를 내보내는것을 말합니다.

그리고 이벤트는 컴포넌트의 emit 메서드를 통하여 발생시킬수 있습니다.

---

이벤트 발생 및 수신

 

컴포넌트의 <template> 블록 안에서 내장 함수 $emit()을 사용하여 직접 커스텀한 이벤트를 내보낼 수 있습니다.

자식 컴포넌트

자식컴포넌트에서 emit을 함수로 사용 시

코드를 줄이고 싶다면 구조분해 할당으로 emit을 가져올 수 있다.

 

그러면 부모 컴포넌트에서 v-on(또는 @)을 사용하여 이벤트를 수신할 수 있습니다.

부모 컴포넌트

.once 수식어는 컴포넌트 커스텀 이벤트에서도 지원됩니다

---

이벤트 파라미터

이벤트와 함께 특정 값을 내보낼 수 있습니다. $emit 함수 이벤트명에 추가로 파라미터를 넘길 수 있습니다.

 

그런다음 부모 컴포넌트에서 이벤트와 함께 파라미터를 받을 수 있습니다.

---

이벤트 선언하기

 

Vue2와 다르게 Vue3에는 emits 옵션을 사용하여 이벤트를 선언할 수 있습니다.

이때 이벤트 선언하는 방법은 두 가지 형식으로 선언할 수 있습니다.

 

• 문자열 배열 선언
• 객체문법 선언

그리고 javaScript 코드에서 이벤트를 내보낼 때는 setup() 함수의 파라미터로 넘어온 context.emit() 메서드를

사용할 수 있습니다. 구조분해 할당으로 사용하려면 { emit } 으로 사용하여 context안에있는 emit을 바로 사용할 수 있습니다.

validateion 로직을 사용하고 싶다면 객체문법으로 선언하여 validateion ( someSubmit 함수 ) 을 추가 할 수 있습니다.

만약에 validation 로직이 없다면 null을 사용합니다.

 

이벤트를 선언 하는것은 선택 사항이지만 공식문서에서는  컴포넌트가 작동하는 방식을 더 잘 문서화하기 위해

모든 이벤트를 정의하는것이 좋다고 가이드를 하고 있습니다.

또한 Vue가 fallthrough 속성 에서 알려진 리스너를 제외할 수 있습니다.

---

사용자 정의 컴포넌트에서 v-model 만들기

 

컴포넌트를 만든 후 해당 컴포넌트에 v-model을 적용하려면 @update:modelValue 이벤트를 사용하여 v-model을 만들 수 있습니다.

 

일반적으로 기본 HTML요소인 <input>태그에 v-model은 아래와 같이 사용합니다.

 

위에 선언된 v-model은 아래와 같이 동작합니다.

---

위에 기본 동작 대신 우리가 만든 컴포넌트는 아래와 같이 수행합니다.

 

이 <LabelInput>을 실제로 동작하게 하려면 아래와 같이 컴포넌트를 정의해야 합니다.

• modelValue Props를 :value 속성에 바인딩
• @input 이벤트에서 새 @update:modelValue 이벤트로 내보냅니다.

자식 컴포넌트

 

그리고 아래와 같이 우리가 만든 컴포넌트에 v-model을 적용할 수 있습니다.

부모 컴포넌트

---

자식 컴포넌트

부모 컴포넌트

Vue3에서는 modelValue라는 Props로 값을 입력받아서 update:modelValue로 이벤트를 발생시킬 수 있다.

---

Computed 이용하기

 

컴포넌트 안에서 computed를 사용하여 v-model을 구현할 수 있습니다.

Computed는 읽기 전용이지만 get(), set() 메서드를 적용하면 쓰기도 가능합니다.

 

전달할 수 있습니다. 이럴때 Emit을 사용할 수 있습니다.

 

<BlogPost> 컴폰넌트를 개발할 때 부모에게 다시 무엇을 전달해야 할 때가 있습니다. 

예를 들어 블로그 게시글 폰트 크기를 확대하는 기능이 있다고 가정해 보겠습니다.

 

 

이제 <BlogPost> 컴포넌트에서 폰트 크기를 확대할 수 있는 버튼을 추가해 보겠습니다.

 

자식 컴포넌트에서는 emits 옵션을 사용하여 이벤트를 선언할 수 있습니다.

그리고 $emit 내장 메서드를 호출하여 이벤트를 발생시킬 수 있습니다.

 

 

부모 컴포넌트에서는 v-on(@) 디렉티브를 사용하여 자식 컴포넌트로부터 전달받은 이벤트를 수신할 수 있습니다.

@enlarge-text로 이벤트를 받아 postFontSize 값을 업데이트 했습니다.

---

v-model 전달인자

 

기본적으로 v-model은 컴포넌트에서 modelValue props와 update:modelValue 이벤트로 사용합니다.

하지만 전달인자(Arguments)를 사용하여 이러한 이름을 수정할 수 있습니다.

 

이 경우 자식 컴포넌트에서는 :title을 속성으로 정의하고 update:title로 이벤트를 내보내야 합니다.

---

다중 v-model 바인딩

 

Vue3에서는 v-model 전달인자를 사용하여 컴포너트에 여러 v-model을 바인딩 할 수 있습니다.