Vue.js .sync modifier

호박고구마·2021년 2월 28일
0
post-custom-banner

Vue.js에서 양방향 바인딩을 한 경우 자식 컴포넌트에서 부모 컴포넌트로 이벤트 emit을 통해 값 변경시 'update:myPropName' 패턴이 권장됨.

간단 예시

부모 컴포넌트에서 props 전달

<parent-component
 :title.sync="doc.title"
 />

자식 컴포넌트에서 이벤트 emit 시

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

주의

v-bind & .sync 수식어는 표현식과 함께 동작하지 않음

:visible.sync="isOneFlag && isTwoFlag" (X)
:visible.sync="isFlag" (O)

출처
vue.js 공식 사이트
https://kr.vuejs.org/v2/guide/components-custom-events.html

0개의 댓글