Vue.js의 새롭게 개선된 prop.sync

해당 포스트는 여기 를 번역한 것입니다. 오타나 번역이 이상한 곳이 있으면 말씀해주세요 (_ _)

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

이 포스트는 props를 하위 컴포넌트로 전달하고 업데이트를 전달하는 두 가지 방법을 알아봅니다. 첫 번째 버전은 익숙한 v-model이며 (Vue 2.2 에서 업데이트) 두 번째 버전은 .sync와 함께 제공됩니다.

v-model

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

<template>
  <doggie v-model="speaks" />
</template>
<script>
  export default {
    data: {
      speaks: 'bark!'
    }
  }
</script>

그 사이에 자식은 speaks 값을 갖는 value prop을 선언합니다.

또한 실제 <input />이 자신의 input 이벤트를 발생 시키면 input 이벤트를 발생시킵니다. 해당 이벤트에 전달 된 값은 부모의 speaks를 업데이트합니다.

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

value prop을 사용하는 자식 컴포넌트는 input 인 emit의 이름처럼 기본 동작입니다. 둘 다 재정의 할 수 있습니다 (Vue 2.2+를 사용하는 경우) 자식에게 model을 추가하면 됩니다.

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

게다가 이제는 v-model에 더 이상 묶이지 않는다는 점을 제외하고는 자식 컴포넌트에 대한 value prop을 선언 할 수 있습니다. 여기에 최종 작업 예제가 있습니다.

https://jsfiddle.net/mauromadeit/dzuvu4jd/?utm_source=website&utm_medium=embed&utm_campaign=dzuvu4jd

.sync

알림: Vue 2.3+에서 동작합니다.

v-model 과 .sync 의 명백한 차이점은 구문입니다. 부모 컴포넌트가 어떻게 표시되는지 확인해봅시다.

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

.sync 를 사용할때는 자식 컴포넌트는 value prop이 필요하지 않다. 대신 부모와 동일한 prop 이름을 사용하면 된다.

It also instead of emitting an input event to update the prop, you emit the conveniently named event update:prop-name. This is the main difference between the old .sync and the new one. Now we need to emit this update event to stay consistent with how we update parent component data like how we do with v-model.

또한 prop를 업데이트하기 위해 input 이벤트를 emit하는 대신 편리한 이름의 이벤트인 update:prop-name을 emit합니다. 이것은 이전 버젼 .sync와 새 버젼의 가장 큰 차이점입니다. 이제 우리는 v-model과 같이 부모 구성 요소 데이터를 업데이트하는 방법과 일관되게 이 업데이트 이벤트를 emit 합니다.

자식 컴포넌트는 아래와 같습니다.

<template>
  <input :value="size" @input="$emit('update:size', $event.target.value)" />
</template>
export default {
  props: ['size'],
}

또 다른 차이점은 컴포넌트에 둘 이상의 prop을 동기화 할 수 있다는 점입니다. 여기에 최종 작업 코드가 있습니다.

https://jsfiddle.net/mauromadeit/9po4j84o/?utm_source=website&utm_medium=embed&utm_campaign=9po4j84o

읽어주셔서 감사합니다. 무언가 부족한 내용이 있다면 아래에 댓글로 남겨주세요.