Notice
Recent Posts
Recent Comments
Link
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | |||
5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 | 27 | 28 | 29 | 30 | 31 |
Tags
- 리스트
- 특약
- javascript
- 납입
- 교보
- 코딩
- 가입
- 자바스크립트
- 변환
- 교보생명
- 프로그래밍
- 보험
- jQuery
- 심장질환
- 급성심근경색증
- 문자열
- 파이썬
- python
- 사망
- 중도인출
- PythonProgramming
- 추가납입
- Vue.js
- 보험료
- 수수료
- 웹개발
- 프론트엔드
- 인출수수료
- 뇌출혈
- Java
Archives
- Today
- Total
SeouliteLab
[Vue.js] Vue 프롭스(props) 이해와 활용하기 본문
프롭스(props)란?
Vue.js에서 프롭스(props)는 부모 컴포넌트가 자식 컴포넌트에게 데이터를 전달하는 데 사용됩니다. 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달하여 자식 컴포넌트에서 사용할 수 있도록 합니다. 이를 통해 컴포넌트 간의 통신을 할 수 있습니다.
예제
아래 예제에서는 부모 컴포넌트에서 자식 컴포넌트로 이름과 나이를 전달하는 예제를 보여줍니다.
부모 컴포넌트 (ParentComponent.vue):
<template>
<div>
<ChildComponent :name="name" :age="age" />
</div>
</template>
<script>
import ChildComponent from './ChildComponent.vue';
export default {
components: {
ChildComponent
},
data() {
return {
name: '홍길동',
age: 30
};
}
}
</script>
자식 컴포넌트 (ChildComponent.vue):
<template>
<div>
<p>이름: {{ name }}</p>
<p>나이: {{ age }}</p>
</div>
</template>
<script>
export default {
props: {
name: String,
age: Number
}
}
</script>
설명
- 부모 컴포넌트에서
ChildComponent
를 호출할 때:name
과:age
를 통해 데이터를 전달합니다. - 자식 컴포넌트에서는
props
속성을 사용하여 전달받은 데이터를 받습니다. 이때,name
과age
는 자식 컴포넌트에서 사용할 수 있는 변수가 됩니다.
주요 특징
- 단방향 데이터 흐름: 부모 컴포넌트에서 자식 컴포넌트로만 데이터를 전달할 수 있습니다.
- 읽기 전용: 자식 컴포넌트에서 전달받은 프롭스를 직접 수정할 수 없습니다. 수정해야 할 경우 부모 컴포넌트에서 데이터를 변경해야 합니다.