[Vue.js] .sync와 update

이전 게시글에서 부모와 자식 컴포넌트가 어떻게 데이터를 주고 받는지 알아봤다.

‘컴포넌트의 데이터 주고받기’ 보러가기

Vue에서는 기본적으로 단방향의 데이터 흐름을 갖고 있고 부모에서 자식으로 내려준 데이터는 수정할 수 없다는 특성을 가지고 있다.

그럼 부모 컴포넌트에서 전달한 데이터를 자식 컴포넌트에서 수정하고 그 결과를 다시 부모 컴포넌트로 돌려 받으려면 어떻게 해야할까?

말그대로 데이터를 자식 컴포넌트로 전달한 뒤 새로운 변수에 담고 데이터를 수정한 뒤 부모 컴포넌트로 다시 전달을 해야하는 번거로움이 있다.

이런 귀찮은 작업을 하지 않기 위해 Vue에서는 .sync 와 update: 라는 기능을 제공한다.

위 기능을 사용하게 되면 자식 컴포넌트에서 부모 컴포넌트가 전달한 데이터를 수정해도 별다른 오류 없이 수정이 가능하며 부모 컴포넌트에 선언된 데이터도 수정된다. 아래 코드를 보자.

//부모 컴포넌트
<template>
  <div>
    <button @click="send">데이터 전달</button>
    <div></div>
    <child-component v-if="openChild" :data.sync='name' @close="openChild = false"></child-component>
  </div>
</template>
<script>

import childComponent from '@/childComponent.vue';

export default {
  components : {childComponent},
  data() {
    return {
      name : "James"
      openChild : false,
    };
  },

  methods : {
    send(){
      this.openChild = true;
    }
  }
};
</script>


//자식 컴포넌트
<template>
  <div>
    <div></div>
    <button @click="returnParent">데이터 변경 후 부모 컴포넌트로 돌아가기</button>
  </div>
</template>
<script>

export default {
  data() {
    return {
      
    };
  },
  props:{
    data : '',
  },
  methods : {
    returnParent(){
      this.$emit('update:data', 'Jessy');
      this.$emit('close');
    }
  }
};
</script>

부모 컴포넌트에서 자식 컴포넌트로 ‘James’라는 데이터를 전달했다. 자식 컴포넌트에서 props를 통해 데이터를 전달 받고, 버튼을 누르면 returnParent() 함수가 실행되면서 data를 ‘James’ -> ‘Jessy’로 변경을 하게되고 부모 컴포넌트에 노출되고 있는 name이 ‘Jessy’로 변경되는 것을 볼 수 있다.