[ Vue ] [ Vue3 Vite ] props

Props란 ?

부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달할 때 사용되는 단방향 데이터 전달 방식이다.

 

 

App.vue ( 부모 컴포넌트 )

html

<template>
  <input type="text" v-model="callProps" />
  <Header :msg="callProps" />
</template>

script

import Header from '@components/Main/Header.vue'
import { ref } from 'vue'

export default {
  data() {
    const callProps = ref('Hello')

    return {
      callProps
    }
  }
}

 

Header.vue ( 자식 컴포넌트 )

html

<template>
    <h1>자식 컴포넌트 확인하기</h1>
    <div>{{msg}}</div>
</template>

script

export default {
    props: {
        msg: String
    }
}

 

부모 컴포넌트(App.vue)에 input창에 텍스트를 입력하면 :msg="callProps"를 통해서 자식 컴포넌트로 보내지고 자식 컴포넌트(Header.vue)에 props를 통해 텍스트가 전달된다.