Vue.js - 상위에서 하위 컴포넌트 데이터 전달 방법 (props)

 

컴포넌트간 통신

 

뷰의 경우는 컴포넌트로 화면을 구성하기 때문에 같은 웹페이지라도 데이터를 공유할 수 없는 경우가 많으며,

각 컴포넌트들의 scope(유효범위)가 독립적이기 때문에 다른 컴포넌트의 값을 직접적으로 참조할 수가 없습니다.

 

 

상/하위 컴포넌트 관계

 

 

상위(Parent) 컴포넌트에서 props라는 속성으로 전달하게 됩니다.

 

props : 상위 컴포넌트에서 하위 컴포넌트로 데이터 전달할 때 사용하는 속성입니다.

- 하위 컴포넌트의 속성에 정의 해야 합니다.

- 상위 컴포넌트의 HTML 코드에 정의된 child-component 태그에 v-bind 속성을 정의 해야 합니다.

 

 

 

---

 

1. 하위 컴포넌트 작성 (ChildAndChild.vue)

 

상위 컴포넌트의 send 속성을 하위 컴포넌트에 props로 데이터를 전달받아 데이터를 출력하는 코드 입니다.

props 속성을 사용하려면 아래와 같이 하위 컴포넌트의 속성에 정의를 해야 합니다.

export default {
  props: ['props 속성 이름'] 
}

또는

Vue.component('child-component', {
	props: ['props 속성 이름'],
});

 

- Source

 

<template>
  <div>
    Parent Component - Child Component
    <br><br>
    <button>
      Parent 데이터 : {{ $props.send }}
    </button>
    <br><br>
  </div>
</template>

<script>
export default {
  props: ['send'],
  name: 'ChildAndChild',
  mounted () {
    console.log(this.$props.send)
  }
}
</script>

 

 

2. 상위 컴포넌트 작성 (TestVueComponent.vue)

 

ChildAndChild 라는 컴포넌트를 생성할 예정이며, 사용할 컴포넌트를 Import 합니다.

상위 컴포넌트의 send 속성을 하위 컴포넌트에 props로 데이터를 전달할 때 사용하는 속성입니다.

 

상위 컴포넌트의 HTML 코드에 등록된 child-and-child 태그에 v-bind 속성을 추가해야 합니다.

v-bind 속성의 왼쪽 값으로 하위 컴포넌트에서 정의한 props 속성 이름을 넣고, 오른쪽 값으로 하위 컴포넌트에 전달할 상위 컴포넌트의 data 속성을 지정합니다.

// <child-component :자식컴포넌트의 props 속성명 = "상위 컴포넌트로부터 받을 속성명" />
<child-and-child :send="childData" />

 

 

 

 

- Source

<template>
  <div>
    <ul>
      <li><child-and-child :send="childData" /></li>
      <li>컴포넌트4</li>
    </ul>
  </div>
</template>

<script>
import ChildAndChild from '@components/kim/ChildAndChild'

export default {
  name: 'Child',
  components: {
    ChildAndChild
  },
  data: function () {
    return {
      childData: 30
    }
  },
  mehtods: {
    setChildData (data) {
      this.childData = data
      console.log(this.childData)
    }
  }
}
</script>

<style>
li {
  padding:20px;
  border-bottom:1px solid #aaa;
  text-align:center;
  cursor:pointer;
}
</style>

 

 

위 예제를 살펴보면,

:send="childData="30" 부분에서 상위 컴포넌트(인스턴스)의 send의 속성 값을 하위 컴포넌트의 propr.send로 전달하였습니다.

따라서, child-and-childe의 templete 속성에 정의된 {{ props.send }}는 30이라는 데이터를 가지게 됩니다.

 

---

 

3. 결과

 

제가 구현한 것과 같이 하위 컴포넌트의 내용이 출력되며 데이터 '30'이 보이는것을 확인할 수 있습니다.

또한, DevTools를 확인하면, props라는 속성에 send데 데이터가 30이 들어가있습니다.

 

props데이터로 인식된 것들은 props 속성 내에 추가가 되며,

props데이터로 인식되지 않은 속성들은 $attr 속성으로 부여된다.

 

 

- 웹페이지

 

 

- Vue DevTools