Vue 부모➡️자식 / 자식➡️부모 데이터 전달하기🚀

 

Vue에서 부모에서 자식으로 데이터 전달, 반대로 자식에서 부모로 데이터 전달이 가능합니다.

부모에서 자식으로 데이터 전달은 Props를 이용해서 전달하고,

자식에서 부모 데이터 전달은 $emit 이벤트를 이용하여 데이터를 전달합니다.

 

간단한 예시로 알아보겠습니다.

아래 글은 Options API 방식 입니다.

Composition API 방식은 다음 글을 참조 바랍니다.

Vue3 Props와 Emit 이벤트 이용해서 부모에서 자식 데이터 주고 받기Composition API

부모에서 자식 데이터 전달하기

Props 옵션을 이용해서 데이터 전달합니다.

부모컴포넌트에서는 parentMessage라는 데이터를 설정하고 :message 속성에 담아서 전달합니다.

그 이후 자식 컴포넌트에서는 Props 옵션을 설정 이후 데이터를 사용하면 데이터가 전달됩니다. 

 

부모컴포넌트

<template>
  <div>
    <ChildComponent :message="message" />
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent,
  },
  data() {
    return {
      message: '안녕하세요!',
    };
  },
};
</script>

자식컴포넌트

<template>
  <div>
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  props: ['message'],
};
</script>

 

단, 자식 컴포넌트에서 Props는 읽기 전용입니다.

Props로 전달 받은 데이터를 변경하려면 오류가 발생합니다.

변경을 하려면 로컬 데이터로 저장을 해서 사용하는 것이 좋습니다.

<script>
export default {
  props: ['message'],
   data() {
    return {
      childMessage: this.message
    }
  }
};
</script>

Vue Props 양방향 바인딩 하는 방법 sync, v-model

자식에서 부모 데이터 전달하기

자식 컴포넌트에서 $emit 이벤트를 이용하여 부모 컴포넌트에서 만들어 놓은 이벤트를 호출합니다.

this.$emit('update', '안녕하세요')

호출 시 부모 컴포넌트에서 미리 연결한 @messageSent="handleMessage" 인하여

handleMessage 이벤트를 수신하고 함수를 호출하게 됩니다.

 

자식 컴포넌트

<template>
  <div>
    <button @click="clickHandler">메시지 전송</button>
  </div>
</template>

<script>
export default {
  methods: {
    clickHandler() {
      this.$emit('update', '안녕하세요!');
    },
  },
};
</script>

부모 컴포넌트

<template>
  <div>
    <ChildComponent @update="handleMessage" />
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent,
  },
  methods: {
    handleMessage(message) {
      console.log('수신한 메시지:', message);
    },
  },
};
</script>

 

Vue에서는 Props 옵션과 emit 이벤트를 이용하여 부모 자식 서로 데이터 전달이 가능합니다.

이상으로 부모 자식 데이터 전달 방법이었습니다.