Vue Props 양방향 바인딩 하는 방법 sync, v-model

Vue에서 자식 컴포넌트에게 데이터를 전달할때, props 속성을 사용합니다.

 

Vue 부모➡️자식 / 자식➡️부모 데이터 전달하기

 

프로그램을 개발하다 보면 자식에게 전달한 데이터를 변경하고 싶을 때가 발생하는데요.

자식 컴포넌트에서 props를 직정 변경하게 되면 오류가 발생합니다.

 

Uncaught TypeError: 'set' on proxy: trap returned falsish for property 'msg'

 

props로 전달한 데이터를 변경하는 방법에 대하여 Vue 버전별로 알아보도록 하겠습니다.

 

Vue < 2.3 ➡️ 기본적인 방법

가장 기본적인 방법으로는 props로 데이터를 전달 한 뒤에

자식 컴포넌트에서 emit을 호출하면 상위 컴포넌트에서 데이터를 변경하는 방법이 있습니다.

<HelloWorld :msg="message" @update:msg="message = 'batman'"/>

this.$emit('update:msg', 'batman');

2.3 < Vue < 3.0  ➡️ sync 사용

Vue 2.3 버전 이후로 .sync 라는 수식어가 생겼습니다.

props sync를 붙이면 상위 컴포넌트에서 emit 이벤트를 등록을 생략할 수 있습니다.

자식 컴포넌트에서 update:propName으로 호출하면 prop을 변경 할 수 있습니다.

<HelloWorld :msg.sync="message"/>

자식컴포넌트

this.$emit('update:msg', 'batman');

 

Vue 3.0 이후 ➡️ 다중 v-model 사용

Vue 3.0 버전 이후에는 sync 수식어가 사라졌습니다.

그 대신, v-model를 다중으로 사용할 수 있습니다.

v-model를 이용하여 props 전달하고

emit을 통하여 변경할 수 있습니다.

<HelloWorld v-model:msg="message"/>

자식컴포넌트

this.$emit('update:msg', 'batman');

 

이상 props를 양방향 바인딩 하는 방법이였습니다

감사합니다.