[Vue.js] .sync

Development/Vue.js

레오나르도 다빈츠 2021. 12. 27. 12:31

◽ .sync

prop에 대해 양방향 바인딩이 필요한 경우가 있다.

"undate:myPropNm" 같은 패턴이 권장되어 아래와 같이 작성하면 양방향 바인딩을 할 수 있다.

<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>

출처

개인적으로 공부한 내용을 정리하는 블로그로
잘못된 개념을 게시하지않도록 주의하고 있으나 오류가 있을 수 있습니다.