Vue 3.0 - Props 실전

주요 개념

• Vue component와 component의 데이터 전달을 하기 위한 방법 중 하나

주요 성격

• component와 component는 부모와 자식 관계가 성립 되어야 한다.
• 단반향 데이터 흐름을 가진다.(one-way-down binding)

👉 아래는 부모 자식 관계가 성립 되어 있다.

// parent component
<template>
  <div>
    <Child></Child>
  </div>
</template>

<script>
import  Child  from "@/views/Child";

export default {
  components:{
    Child
  }
}
</script>

👉 단반향 데이터 흐름을 가진다.(one-way-down binding)

Props 예제

// parent component
<template>
  <div>
    <Child :childValue='value'></Child>
  </div>
</template>

<script>
import  Child  from "@/views/Child";

export default {
  components: {
    Child
  },
  data() {
    return {
      value: 'superpil',
    }
  }
}
</script>

// child component
<template>
  <div>
    {{ childValue }}
  </div>
</template>

<script>

export default {
  props: ["childValue"],
  created() {
    console.log('this.childValue', this.childValue);
  }
}
</script>

props 기본 다이어 그램

https://pygmalion0220.tistory.com/entry/Vue-%EC%9D%B4%EB%B2%A4%ED%8A%B8-%EC%A0%84%EB%8B%AC-Props