[Vue.js] .sync 수식어 - 양방향 바인딩

.sync

vue로 개발을 하다보면 부모 컴포넌트의 data를 자식 컴포넌트에서 값을 변경해야하는 경우가 있는데 이처럼 prop을 사용할 때 양방향 바인딩이 필요한 경우가 있다. 이런 상황에서 여러가지 방법이 있는데, 예를 들어 v-model을 사용할 수도 있고 update 이벤트를 props로 전달하는 방법, 그리고 이번에 포스팅할 .sync 수식어를 사용하는 방법이 있다.

.sync 수식어는 2.3.0+부터 추가된 수식어로 위의 방법과 달리 간단한 수식어로 컴포넌트 간의 양방향 바인딩이 가능하게 해준다. 하지만 양방향 바인딩은 유지보수 측면에서 이슈를 발생시킬 수 있다. 자식 컴포넌트가 부모 컴포넌트를 변경할 수 있게 되면, 부모 컴포넌트와 자식 컴포넌트 중 어디에서 변했는지를 특정할 수 없게 될 수 있기 때문이다.

그렇기 때문에 이벤트를 emit할 때에는 update:propsName 과 같은 패턴이 권장된다. 예를 들어 title 이라는 prop을 갖는 컴포넌트가 있다고 할 때, 아래와 같이 새로운 값을 할당하도록 요청할 수 있다.

this.$emit('update:title', newTitle);

그러면 부모 컴포넌트는 이벤트를 감지하여 로컬 data 속성을 업데이트 할 수 있다.

<text-document
               v-bind:title="doc.title"
               v-on:update:title="doc.title = $event"></text-document>

편의를 위해 이러한 패턴을 .sync 수식어를 이용하여 줄여서 사용할 수 있다.

<text-document v-bind:title.sync="doc.title"></text-document>

v-bind 와 .sync 수식어는 표현식과 함께 동작하지 않는다. (e.g. v-bind:title.sync="doc.title+'''!" 는 동작하지 않는다. )