vue - prop.sync 와 update:prop

Vue 2.3에서는 이전에 제거 된 .sync 수정자가 새로운 방식으로 다시 도입되었습니다.

이 포스트는 props를 하위 컴포넌트로 전달하고 업데이트를 전달하는 두 가지 방법을 알아봅니다.

V-model

부모 컴포넌트는 v-model 지시자로 자식에게 speaks 를 바인딩합니다

<template> 
<doggie v-model="speaks" /> 
</template> 

<script> 
export default 
{ data: { speaks: 'bark!' } } 
</script>

input 테그 자신이 input 이벤트를 발생시키면 해당이벤트에 전달된 값은 부모의 speacks를 업데이트합니다. 

<!-- children component -->
<template>
<input :value="value" @input="$emit('input', $event.target.value)" />
</template> 
<script>
export default { 
props: ['value'], 
}

</script>

둘 다 재정의 할 수 있습니다 (Vue 2.2+를 사용하는 경우) 자식에게 model을 추가하면 됩니다.

export default { 
props: ['sound'], 
model: { prop: 'sound', event: 'updateSound' }, 
}

게다가 이제는 v-model에 더 이상 묶이지 않는다는 점을 제외하고는

자식 컴포넌트에 대한 value prop을 선언 할 수 있습니다.

 

.Sync

v-model과 .sync의 차이점은 구문입니다. 부모컴포넌트가 어떻게 표시되는지 보세요

<template>
<doggie :size.sync="size" />
</template> 
<script> export default { 
data: { size: 'little' }
} 
</script>

<!-- children component -->

<template> 
<input :value="size" @input="$emit('update:size', $event.target.value)" />
</template> 

export default { props: ['size'], }

 

.sync 를 사용할때는 자식 컴포넌트는 value prop이 필요하지 않다. 대신 부모와 동일한 prop 이름을 사용하면 된다.
또한 prop를 업데이트하기 위해 input 이벤트를 emit하는 대신 편리한 이름의 이벤트인 update:prop-name을 emit합니다.

prop-name 을 update 뒤쪽에 적어준다는게 중요한 포인트인거같네요

자식쪽에서 부모의 데이터를 직접 제어하는건 좋지못하다고 알고있는데요 그이유는 나중에 부모의 컴포넌트가 커졌을때 어느 자식쪽에서 데이터를 바꿔주고있는건지 확인하기 어렵기 때문이라 들었습니다.

많이 사용하지는 않는게 좋을거라 생각되지만.. 알아둬야 할 기능인거같습니다