[Vue.js] - Vue Props 속성을 사용해서 데이터 전달 하는 방법

#Vue Props란?

Vue Props는 Vue 컴포넌트에서 다른 컴포넌트로 데이터를 전달하기 위해 사용하는 속성입니다. Props는 상위 컴포넌트에서 하위 컴포넌트로 데이터를 전달하는 방법으로 사용됩니다. Props를 사용하여 하위 컴포넌트에서 상위 컴포넌트의 데이터를 수정하지 않고 데이터를 전달할 수 있습니다.

Props는 상위 컴포넌트에서 하위 컴포넌트로 전달됩니다. 하위 컴포넌트에서는 Props를 받아들이고, 받은 데이터를 사용하여 렌더링 하거나 다른 작업을 수행할 수 있습니다.

Props는 컴포넌트 간의 데이터 흐름을 구현하는 데 사용됩니다. 상위 컴포넌트에서 데이터를 전달하면 하위 컴포넌트에서는 이 데이터를 사용하여 UI를 렌더링 하거나 다른 작업을 수행합니다. 이러한 데이터 전달 방식은 Vue.js에서 권장되는 단방향 데이터 흐름 패턴입니다.

Vue Props는 컴포넌트 간의 데이터 전달을 구현하는 데 중요한 역할을 합니다. Props를 사용하여 데이터를 전달하면 컴포넌트를 재사용하기 쉽고 유지보수하기 쉬워집니다.

 

 

#Vue Props를 사용해서 부모 컴포넌트에서 자식 컴포넌트로 데이터 전달하는 방법

 

-자식 컴포넌트

{{}}를 사용해서 문자열에 대한 데이터 바인딩 처리를 할 수 있습니다.

<template>
    <h2>{{ title }}</h2>
</template>
<script>
    export default {
        props: {
            title: {
                type: String,
                default: "default 페이지 제목입니다."
            }
        }
    }
</script>

 

-부모 컴포넌트

부모 컴포넌트의 PageTitle title에 지정된 값이 자식 컴포넌트인 PageTitle에 정의된 props의 title에 전달됩니다.

<template>
    <div>
        <PageTitle title="부모 컴포넌트에서 자식 컴포넌트로 데이터 전달" />
    </div>
</template>
<script>
    import PageTitle from '../components/PageTitle';
    export default {
        components: {PageTitle}
    }
</script>

 

-Vue Props를 사용해서 부모 컴포넌트에서 자식 컴포넌트로 데이터 전달하는 방법 테스트