Vue.js 자식에서 부모로 데이터 전송하기 (객체 일부값만 변경하는법)

부모 컴포넌트에서 데이터 바인딩을 통해 자식 컴포넌트로 데이터를 전달한다.

(v-bind 디렉티브 사용!)

 

자식컴포넌트에서 데이터 변경이 발생시

v-on으로 선언된 함수로 데이터를 전송해 변경할 수 있다.

 

이때, 객체의 일부값만 변경하고싶다면 Object.assign 을 활용할 수 있다.

 

 

 

1. 부모에서 자식으로 데이터 전달하기

 

/* 부모컴포넌트 */
<template>
  <child
    :item="item"
    @updateData="updateData">
  </child> /* 자식컴포넌트 */
</template>

<script>
export default {
  data () {
     item: { 'id': 1, 'width': 10 }
  },
  
  method: {
    updateData () {
      Object.assign(this.item, param) /* 특정 */
    }
  }
}
</script>

위와같은 구조일때,

부모 컴포넌트에서 item 이라는 변수를 자식컴포넌트(child)에 바인딩 하였다.

 

자식컴포넌트에서 해당 데이터를 전달받아

아래의 방식으로 부모에게 전달할 수 있다.

 

 

2. 자식 컴포넌트에서 데이터 변경 후 부모로 전달하기

/* 스크립트부분 */

export default {

  props: ['item'],
  
  methods: {
    
    /* item의 id의 값을 변경하는 함수 */
    testFunc () {
      let newData = { 'id': 10 }
      this.$emit('updateData', newData)
    }
    
  }

}

자식컴포넌트의 testFunc가 부모로부터 전달받은 데이터를 변경하는 함수이다.

로직을 살펴보면 this.$emit 을 통해 부모로 변경된 데이터를 전송하는것을 확인할 수 있다.

 

 

3. 자식에서 변경된 데이터 부모에 반영하기

 

 

부모컴포넌트에서는 v-on 디렉티브로 자식의 이벤트를 전달받는다.

또한 자식에서 item 변수의 id값만 일부 변경하였으므로,

변경사항만 객체에 반영하기 위해 Object.assign 메소드를 사용하였다.

/* 부모컴포넌트 스크립트 */

updateData (param) {
  Object.assign(this.item, param)
}

 

 

 

 

 

 

---

참고링크 1. (vue.js 디렉티브) : https://v3.ko.vuejs.org/api/directives.html#v-text

 

참고링크 2. (props) :  https://vuejs.org/guide/components/props.html