개발/vue
[vue] vue.js _ props사용법
개발햄
2019. 2. 17. 12:14
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 + '환영합니다.'
}
},