[Vue.js] Vue CLI 프로젝트 : Props 데이터 수정하여 부모 컴포넌트에도 알리기 $emit()

[Vue.js] Vue CLI 프로젝트 : Props 데이터 수정하여 부모 컴포넌트에도 알리기 $emit()

이전 글

2022.02.13 - [JS & Framework/vue.js] - [Vue.js] Vue CLI 프로젝트 : props의 활용

2022.02.12 - [JS & Framework/vue.js] - [Vue.js] Vue.js CLI 프로젝트 : 부모 자식 간의 데이터 전달 Props

2022.02.12 - [JS & Framework/vue.js] - [Vue.js] Vue CLI 프로젝트 : Vuetify Buttons 버튼 사용하기

 

Props를 사용하면 자식 컴포넌트에서는 부모 컴포넌트의 데이터를 받아서 사용할 수 있습니다.

 

그런데, 자식 컴포넌트에서 부모 컴포넌트에서 받아온 데이터를 수정할 때는 부모 데이터에 바로 영향을 주지 않습니다.

 

다음 소스코드를 확인하겠습니다. (이전 글에서 사용된 소스코드를 이어서 사용합니다.)

 

# 부모 컴포넌트

현재 부모 컴포넌트에서 자식 컴포넌트로 name이라는 값을 nameOfChild로 전달하고 있습니다.

# 자식 컴포넌트

자식 컴포넌트에서는 부모 컴포넌트로 받은 nameOfChild라는 값을 사용하고 있습니다.

input text(여기선 vuetify의 v-text-field 태그를 사용)를 추가해 v-model로 해당 값을 관리할 수 있게 세팅합니다.

필드에서 직접 데이터 수정이 가능하고, 수정된 데이터는 자식 컴포넌트에서만 변경된 값을 적용하고 있습니다.

부모 컴포넌트의 name은 'vue project'로 그대로 이고, 자식 컴포넌트의 nameOfChild는 'vue project 수정이 ...' 로 변경된 것을 확인할 수 있습니다.

부모 컴포넌트로 데이터를 전달 받은 자식 컴포넌트에서, 그 데이터를 수정해서 부모 컴포넌트의 데이터도 변경을 하고 싶다면 $emit() 을 사용해야 합니다.

 

먼저 emit을 사용하기 위한 세팅을 합니다. 자식 컴포넌트에 부모의 Name을 수정할 수 있는 기능을 추가할 것입니다. 버튼을 추가합니다. (v-btn은 vuetify의 태그입니다.)

해당 함수가 잘 동작하는지 먼저 테스트합니다.

세팅한 함수가 잘 동작하고 있다면 $emit() 을 사용해 부모 컴포넌트에 child라는 이름의 요청과 변경된 값을 request 합니다.

$emit에 대해 간단히 설명하면, child라는 request를 부모 컴포넌트로 보내면서 인자 값으로 this.nameOfChild를 같이 전달하는 것입니다.

 

부모 컴포넌트에서는 child라는 request를 자식 컴포넌트로부터 받게 되는데, 부모 컴포넌트에서는 코드를 다음과 같이 작성합니다.

자식 컴포넌트 태그 @child="parents"

'자식 컴포넌트가 작성된 태그, 즉 해당 자식 컴포넌트로부터 child라는 요청이 왔을 때의 처리는 parents 라는 것(method)으로 한다.' 가 됩니다.

 

스크립트에는 parents 라는 이름의 methods를 작성합니다.

버튼을 눌러서 동작을 확인합니다.

그럼 이제 자식 컴포넌트에서 변경된 이름을 받아서 부모 컴포넌트의 데이터도 수정되도록 코드를 수정합니다.

부모 컴포넌트에서 parents 함수에 자식 데이터로부터 받은 nameOfChild를 파라미터로 넣고, 파라미터로 들어온 값을 부모 컴포넌트의 name 변수에 세팅합니다.

값을 수정하고 버튼을 클릭해서 해당 동작들을 확인합니다.

받은 값을 console.log로 출력을 하고 있고, 부모 컴포넌트의 name 값도 변경되어 부모 컴포넌트 - 자식 컴포넌트간의 값이 일치하게 되었습니다.

---

오늘은 $emit() 을 통해 자식 컴포넌트에서 부모 컴포넌트로 데이터를 전달하는 방법에 대해 알아보았습니다. 도움이되셨다면 좋아요 꾹! 구독 꾹! 광고 꾹! 해주시면 저에게 정말 큰 힘이 됩니다! 감사합니다.^^