Vue js - props 부모-자식 데이터 이동

부모 컴포넌트에서 자식 컴포넌트로 데이터를 보여주는 간단한 코드를 진행할 예정이다.

 

 

parent - App.vue

<script>
import Test from "@/components/Test";

...

export default {
  name: 'App',
  components: {
    Test
  },

부모 컴포넌트에서 자식 컴포넌트(Test)를 import 해서 export 할 때 컴포넌트에 추가한다.

 

 

<template>
  <div id="app">
    <Test v-bind:testmsg="message" />
    <Test testmsg="child send message" />
  </div>
</template>

<script>
export default {
  ...
  data: ()=>({
    message : '부모에서 입력한 메시지'
  })
}
</script>

부모 template에 <자식> 컴포넌트 태그로 전달할 데이터를 선언한다.

v-bind로 보낼수 있고, 직접 html부분에 표기할 수 있다.

 

 

1.  v-bind 경우

 

부모 html 부분

<Test v-bind:자식에게전달할KEY값="script에 data KEY값"/>

 

자식 script 부분

data: () => ({

    script에 data KEY값 : '입력할 메시지'

})

 

 

2. html 표기 경우

<Test 자식에게전달할KEY값='부모에서 입력한 메시지' />

 

 

 

 

 

parent - App.vue 전체 소스

<template>
  <div id="app">
    <Test v-bind:testmsg="message"/>
  </div>
</template>

<script>
import Test from "@/components/Test";

export default {
  name: 'App',
  components: {
    Test
  },
  data: ()=>({
    message : '부모에서 입력한 메시지'
  })
}
</script>

<style>
#app {
}
</style>

 

 

 

 

child - Test.vue

 

자식 컴포넌트에서는 부모에서 지정한 key값으로 데이터를 보여줄 준비를 한다.

<template>
  <div id="testDiv">
    1. message 표기 테스트 : {{ msg }}
  </div>
</template>

<script>
export default {
  name: "Test",
  props : ['testmsg'],
  data(){
    return{
      msg : this.testmsg
    }
  }
}
</script>

<style scoped>

</style>

 

자식 html 부분

<div>

{{자식 script에 data KEY값}}

</div>

 

자식 script 부분

export default {
  props : ['자식에게전달할KEY값'],
  data(){
    return{
      자식 script에 data KEY값 : this.자식에게전달할KEY값
    }
  }
}

 

props 로 부모-자식간의 key를 공유받으며, 부모->자식으로의 방향으로 소통된다.

 

 

 

 

 

실행 결과