[Vue.js] 부모-자식간의 데이터 전달 (Props)

- Props : 부모가 가지고 있는 데이터를 자식컴포넌트에게 전달해줄 때 사용하는 Properties

- v-bind : 부모에게서 전달하고자 하는 값

 

Given...

1) 부모 컴포넌트 : User

2) 자식 컴포넌트 : UserDetail, UserEdit

 

- User.vue↓(부모)

<template>
    <div class="blue lighten-3 pa-3">
        <h1>User 컴포넌트</h1>
        <p>이름: {{ name }}</p>
        <v-btn @click="changeName()">이름 변경</v-btn>
        <hr>
        <v-layout row wrap>
            <v-flex xs12 sm6>
                <UserDetail v-bind:nameOfChild="name"></UserDetail>
                // UserDetail 컴포넌트에 name 속성을 전달
                //:NAME : props의 변수명, "name":어떤 값을 넣어줄거냐~
            </v-flex>
            <v-flex xs12 sm6>
                <UserEdit></UserEdit>
            </v-flex>
        </v-layout>
    </div>
</template>

<script>
    import UserDetail from './UserDetail.vue';
    import UserEdit from './UserEdit.vue';

    export default {
        components: {
            UserDetail,
            UserEdit
        },
        data() {
            return {
                name: '뷰제이에스'
            }
        },
        methods: {
            changeName() {
                this.name = '이순신';
            }
        }
    }
</script>

 

: nameOfChild ="name"

부모가 가지고 있는 정보 (name)를 자식에게 전달해주는 방법 : props!

 

코드 설명 : 이 정보를 너한테 줄게 라고, 부모 --> 자식에게 말해주는 과정이다.

nameOfChild : 자식에게 선언되는 props의 변수명

"name" : 그 변수에 어떤 값을 넣어줄거냐~

<UserDetail :nameOfChild ="name"></UserDetail>

UserDetail이라는 컴포넌트 안에 nameOfChild 이라는 변수를 사용할건데, 그 변수에는 부모 컴포넌트(User)가 갖고있는 name이라는 값을 자식's nameOfChild에 넣어줄게 라는 뜻이다.

 

UserDetail.vue ↓(자식)

나 그럼 그 값 받을게 ! => Props

Props는 array 형태로 값을 선언함. - 부모컴포넌트에서 만들어준 변수명을 선언해준다.

<template>
	<div class="">
    	<h3>회원정보를 확인합니다.</h3>
        <p>{{ nameOfChild }}</p>
    </div>
</template>

<script>
export default {
	props: ['nameOfChild'],
    data () {
    	return {
        }
    }
}
</script>

마침내, 부모컴포넌트의 nameOfChild를 자식컴포넌트안에서 사용할 수 있게 되었다!!