[vue] vue.js _ props사용법

user.vue

<template>

<div class="blue lighten-3 pa-3">

<h1>User 컴포넌트</h1>

<p>이름: {{name}}</p>

<v-btn color="info" @click="changeName()">이름 바꾸기</v-btn>

<hr>

<v-layout row wrap>

<v-flex xs12 sm6>

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

</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"

//프롭스 : 부모 컴포넌트에서 자식 컴포넌트로 값을 전달하는 방법

// v-bind (:자식변수 = "어떤값을 줄 것인가(부모 컴포넌트) ")

export default {

components: {

UserDetail,

UserEdit

},

data(){

return{

name:'vueJS'

}

},

methods: {

changeName (){

if(this.name == "hoza"){

this.name ="vue.js"

}else{

this.name = "hoza"

}

}

}

}

</script>

@click="changeName"을 통해 changeName 펑션으로 이동.

if문 판정에 의해 값이 바뀝니다 

이 때 자식화면에 값을 전달할 때

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

를 통해서 nameOfChild라는 이름으로 부모화면의 name값을 전달해줍니다.

userDtail.vue

<template>

<div class="red lighten-3 pa-3">

<h3>자세한 회원 정보를 확인합니다.</h3>

<p>{{nameOfChild}}</p>

</div>

</template>

<script>

export default {

// 부모로부터 값을 받는 props

props:['nameOfChild'],

data(){

return{

}

}

}

</script>

전달한 값을 

props:['nameOfChild']

를 통해서 받고 temlplate에 적용하면 화면 간 값을 주고 받을 수 있습니다. 

여러 값을 보낼 때

user.vue

<UserDetail :nameOfChild="{name, familyName}"></UserDetail>

userDtail.vue

<template>

<div class="red lighten-3 pa-3">

<h3>자세한 회원 정보를 확인합니다.</h3>

<p>{{nameOfChild}}</p>

<p>{{sayHellow}}</p>

</div>

</template>

<script>

export default {

// 부모로부터 값을 받는 props

props:{

// 변수 : 변수타입

// 기록을 해주는 이유는 데이터 타입을 알기 쉽게 위해서.

nameOfChild:{

type:String,

// 반드시 필요하다는 의미

required: true,

// 값을 전달하지 않을 경우 디폴트값 설정 가능

default:'TEST'

}

},

computed:{

sayHellow() {

return this.nameOfChild + '환영합니다.'

}

},