Vue.js - 컴포넌트 통신 동적 props 사용하기 (Daynamic props)

Vue를 사용할 때 부모 컴포넌트에 있는 데이터를 자식 컴포넌트에서 필요로 할 때가 있습니다. 

props 옵션을 사용하면 부모 컴포넌트에 있는 데이터를 자식 컴포넌트로 보낼 수 있습니다.

저번 포스팅에는 정적 porps에 대해서 다루었는데요.

 

https://kshman94.tistory.com/125

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

 

항상 정적인 데이터만 자식에게 넘겨주시는 것이 아니므로, 동적으로 변하는 data를 자식에게 넘겨줘야 할 경우가 있습니다. 그럴 경우에 동적 props를 이용하면 됩니다.

 

이번 포스팅에는 동적 props(Dynamic Props)로 사용하는 것을 작성해보겠습니다.

 

---

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

 

부모 컴포넌트에서 msg를 입력(수정)할 때마다 변동되는 data가 props를 통해 자식에게 전달됩니다.

 

v-model 디렉티브는 폼 요소와 같이 사용자의 입력을 받을 수 있는 요소에 양방향 데이터 바인딩을 생성할 수 있는 디렉티브입니다.

 

<template>
  <div>
    <ul>
      <li>
        <h3>Parent Component - Child Component Dynamic Props !</h3>
        <br><br>
        <input v-model="msg">
        <br>
        <dynamic-props :message="msg" />
      </li>
    </ul>
  </div>
</template>

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

export default {
  name: 'Child',
  components: {
    DynamicProps
  },
  data: function () {
    return {
      msg: ''
    }
  }
}
</script>

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

 

---

 

2. 하위 컴포넌트 작성 (DynamicProps.vue)

 

전 포스팅에 작성했던 내용과 같이 사용하면 됩니다.

props를 이용하여 데이터를 출력하는 코드입니다.

 

<template>
  <div>
    <div>
      <br>
      상위 컴포넌트에서 받은 값 : {{ $props.message }}
    </div>
    <br><br>
  </div>
</template>

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

 

---

3. Dynamic Component 결과

 

코드를 작성한 대로,

자식 컴포넌트로 props를 통하여 입력한 msg를 보내고 출력이 정상적으로 됩니다.

 

- Web 

 

 

 

 

- devTools

 

 

---