반응형
1. props 란 ?
: 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달할때 사용되어지는 단방향 데이터 전달 방식
2. 사용 방식
부모 컴포넌트에서 자식 컴포넌트를 호출시 자식 컴포넌트 태그 내 v-bind나 : 키워드를통해 데이터를 전달하고 자식 컴포넌트에서 props객체를 통해 데이터를 전달받는 방식이다.
1) 부모 컴포넌트
반응형
<template>
<!--첫번째 방법-->
<자식컴포넌트이름 :props이름="전달데이터"/>
<!--두번째 방법-->
<자식컴포넌트이름 v-bind:props이름="전달데이터"/>
</template>
<script>
export default {
data() {
전달데이터: Array
}
}
</script>
2) 자식 컴포넌트
<script>
export default {
name : 'Product',
props : {
product : Object
}
}
</script>
- 부모 컴포넌트에서 보내고자 하는 데이터를 디렉티브를 적어 props이름을 설정한다.
- 그리고 보내고자하는 데이터를 이곳에 보낸다.
- 그리고 자식 컴포넌트에서 이를 props로 가져온다.
3) 예시
<template>
<div class="third">
<PagiNation :list-array="list" />
</div>
</template>
<script>
import PagiNation from './PagiNation.vue'
export default {
components: {
PagiNation
}
}
</script>
props: {
listArray: {
type: Array,
required: true
},
pageSize: {
type: Number,
required: false,
default: 6
}
👩🏻💻 알게된 점
props문법을 알게되고 나서 이를 쓸려고 vue를 만들었다. 알다싶이 props는 단방향 방식이고 변경도 불가하다. 그래서 내가 생각하려고 하는 방향이 잘 안됐다. 그래서 검색해보니 props와 많이 쓰는 문법이 존재했다.
emit
1. 개념
컴포넌트의 통신 방법 중 하위 컴포넌트에서 상위 컴포넌트로 통신하는 방식이다. 위에서 언급했듯이 상위 컴포넌트에서 전달받은 변수를 다시 하위 컴포넌트에서 상위 컴포넌트에 전달하는 것이 가능한 방식이다.
2. 사용방법
// 상위 컴포넌트의 템플릿
<div id="app">
<child-component v-on:이벤트명="상위 컴포넌트의 실행할 메서드명">
</child-component>
</div>
// 하위 컴포넌트의 내용
this.$emit('이벤트 명');
위와 같이 설정하면 되는데 처음에 돌아가는 방식 습득하기 어렵다. 예시를 보고 따라하면 조금 쉽다.
3-1. 예시
// 상위 컴포넌트
<template>
<div>
<span>{{ count }}</span>
<ChildView :count="count" @change="change" />
</div>
</template>
<script>
import ChildView from './ChildView.vue'
export default {
data() {
return {
count: 0
}
},
methods: {
change(value) {
this.count = value
}
},
components: { ChildView }
}
</script>
상위 컴포넌트
- 하위 컴포넌트 가져오기 : 하위 컴포넌트에 data를 전달하기 이전에, 하위 컴포넌트를 임포트해서 가져온다.
- data 선언 : 하위 컴포넌트에 주고자 하는 data를 선언한다.
- 하위 컴포넌트에 전달 : v-on디렉티브를 사용하여 data명과 일치하게 변수값도 선언한다. 헷갈리기에 이렇게 선언하는 것이 좋다. (:count = count)
- 함수 선언 : 하위 컴포넌트에서 데이터값이 변화된 것을 상위 컴포넌트에 실행하기 위해 함수를 선언해준다.
// 하위 컴포넌트
<template>
<div>
<div @click="increment">여기를 클릭하세요: {{ count }}</div>
</div>
</template>
<script>
export default {
props: ['count'],
methods: {
increment() {
this.$emit('change', this.count + 1)
}
}
}
</script>
하위 컴포넌트
- props로 변수 가져오기 : props로 선언한 값 가져온다.
- 함수 선언 : 상위 컴포넌트에서 변한 변수값을 알기 위해서 함수를 선언하였다. 하위 컴포넌트에서도 div태그를 클릭시 함수를 선언한다. 그리고 여기 수정된 값을 change emit를 통해 상위 컴포넌트로 넘겨준다.
- 상위 컴포넌트 업데이트 : count 데이터를 상위 컴포넌트로 넘겨주어 데이터를 업데이트한다.
결과값
3-2. 예시
// 상위 컴포넌트
<template>
<div>
<span>{{ modal }}</span>
<ChildView :modal="modal" @change="change" />
</div>
</template>
<script>
import ChildView from './ChildView.vue'
export default {
data() {
return {
modal: false
}
},
methods: {
change(value) {
this.modal = value
}
},
components: { ChildView }
}
</script>
위의 예시와 똑같다. 그런데 이 데이터는 boolean값으로 업데이트를 하는 것이 달라 예시로 넣었다. 하는 방법은 위의 상위 컴포넌트와 일치한다.
// 하위 컴포넌트
<template>
<div>
<div @click="changeModal">여기를 클릭하세요: {{ modal }}</div>
</div>
</template>
<script>
export default {
props: ['modal'],
methods: {
changeModal() {
if (!this.modal) {
this.$emit('change', true)
} else {
this.$emit('change', false)
}
}
}
}
</script>
하위 컴포넌트가 조금 다르다. emit를 통해 값을 변경하고자 했을 때 오류가 났다.
this.modal = true
this.modal === true
위와 같이 선언하였다. 그런데 저런 오류가 나길래, true으로 선언해주니 오류가 없어지고 제대로 값을 변경해주었다.
🔗 참고
반응형
