vue.js/문법
[Vue]Props & $emit()
슬래기
2022. 11. 2. 17:10
Props란?
부모 컴포넌트에서 자식 컴포넌트로
데이터를 전달할때 사용되어지는
단방향 데이터 전달 방식이다(자식 컴포넌트에서는 Props값의 수정이 불가능하다.)
부모 컴포넌트
<!--부모 컴포넌트-->
<template>
<!--첫번째, 두번째 모두 같은 결과-->
<!--첫번째 방법-->
<자식컴포넌트이름 :props이름="전달데이터"/>
<!--두번째 방법-->
<자식컴포넌트이름 v-bind:props이름="전달데이터"/>
</template>자식 컴포넌트
export default {
props: {
title: {type : [String,Number], default : 100}, //여러가지 타입 허용
title2: {
type: [String,Number], //여러가지 타입 허용
required: true //필수로 전달 받아야함
},
title3: {
type: Object,
default: () => {} //배열이나 함수의 기본 값은 항상 함수로부터 반환되어야 함
}
},
title4: {
type: Array,
required: true,
default: () => { return [1, 2, 3, 4] },
validator: (val) => {
return val.length > 5
}
}
}
//default: () => { return [1, 2, 3, 4] }
//default: () => { return { abc: 'vasfd' } }$emit
자식 컴포넌트에서는 props의 값은 변경이 불가하다.
그렇다면 $emit문법을 통해 부모 컴포넌트로 변경값을 보내어 부모의 data변경이 가능하다.
부모 컴포넌트
<template>
<div>
<h1>Welcome to Home</h1>
<inputField :title = "title" @titleFromChild="titleChange"/>
{{ title }}
</div>
</template>
...
<script>
date() {
return {
title : ""
}
},
...,
methods: {
titleChange(title) {
this.title = title
}
}
</script>부모 컴포넌트에서 새로 생성한 titleChange 메서드는 부모의 this.title 값을 titleChange 메서드가 titleFromChild 메서드로부터 받아오는 인자값 title로 지정해주게 된다.
자식 컴포넌트
<input type="text" :value = "title" @input = "titleUpdate" style = "padding: 20px; border: 1px pink solid">
...
<script>
methods : {
titleUpdate(e) {
this.$emit('titleFromChild', e.target.value)
}
}
</script>부모에서 바인딩 해준 titleFromChild 을 $emit("titleFromChild ",e.target.value )를 실행시켜 props값을 변경시킨다.