데이터통신하면 학부시절 D 맞았던 데이터통신을 잊을래야 잊을 수가 없다.
컴공 암기과목 끝판왕.
아래는 Parent.vue
...
<Children :p-image-style="imageStyle" :p-img-src="imgSrc" @for-child="forChild" ref="imgComp" />
<div>
<button @click="callChild">자식함수호출</button>
</div>
...
import Children from '@/components/Children.vue'
...
components: {
Children
}
...
아래는 Children.vue
<template>
<div>
<img :src="imgSrc" :style="imageStyle" ref="img">
<div>
<button @click="callParent">부모함수호출</button>
</div>
</div>
</template>
<script>
export default {
name: 'Children',
props: {
pImgSrc: {
type: String,
required: true
},
pImageStyle: {
type: Object,
required: false
}
},
mounted () {
this.imgSrc = this.pImgSrc
this.imageStyle = this.pImageStyle
},
data: function () {
return {
imageStyle: {
maxWidth: '1000px'
},
imgSrc: ''
}
},
methods: {
forParent () {
console.log('부모 컴포넌트에서 자식 컴포넌트의 함수를 호출')
},
callParent () {
const arg01 = 'value-arg01'
const arg02 = 'value-arg02'
this.$emit('for-child', arg01, arg02)
}
}
}
</script>
<style scoped>
</style>
하나의 컴포넌트에 다른 컴포넌트 요소를 사용하기 위해, 위 처럼 작성을 할 수 있음
Children Element에서 다양한 속성들이 지정되어 있는데, 이에 대하여 알아보자!
1. props를 이용한 데이터 전달
children.vue에 props를 보면 pImgSrc와 pImgStyle이 있고,
parent.vue에는 Children 엘리먼트에
:p-image-style="imageStyle" :p-img-src="imgSrc"
위와 같은 내용이 있다.
props에는 카멜로 표기되어 있으나, 위처럼 케밥으로 변경하여 표기해도 되고, 그냥 카멜로 표기해도 상관없음!
내용 자체는 간단한...
p-img-src 에 imgSrc를 전달 한다 라는 의미!
여기서 중요한 점은 v-bind(:)를 사용했을 때와 아닌때의 차이!
:를 사용하지 않았을 경우에는 단순히 문자열을 전달하는 것이고,
반대로 사용했을때는 data의 값이나 정의된 함수도 전달이 가능한점!
주의할점은
:를 사용하면 부모 컴포넌트에서 시시각각 변하는 데이터도 그대로 반영되기 때문에, 자식컴포넌트에서 prop을 그대로 사용하기보단 data로 전달 받아서 사용하는게 좋다고 한다.
children.vue의 mounted()를 보면 알 수 있쒀.
또한 props에서 type, required, default를 지정 할 수 있는데,
객체나 배열은 default가 팩토리 함수로 생겨먹어야 한다고 한다.
2. 부모 컴포넌트에서 자식놈 함수 호출(or 데이터변경)!
이건 뭐 사실 함수뿐 아니라 자식놈 data도 손 쉽게 수정은 가능하다. 바로...
children element의 ref="imgComp" 때문인데...
parent.vue에서 접근하는 방식은 this.$refs.imgComp다...
이게 chilren.vue에서는 this = this.$refs.imgComp 같은 맥락이라고 보면 된다.
고로 this.forParent() = this.$refs.imgComp.forParent()
이런셈...
3. 자식 컴포넌트에서 부모 함수 호출!
이것도 매우 간단하다!
일단 부모에 함수가 있어야 하고,
...
forChild (arg01, arg02) {
console.log('for-child', arg01, arg02)
}
...
자식 컴포넌트를 엘리먼트로 작성해줄때 해당 함수를 사용 할 수 있게끔 속성으로 선언을 해준다.
@for-child="forChild"
위처럼...
이것도 마찬가지로 케밥이든 카멜이든 알아서 잘 되고,
좌변은 자식컴포넌트에서 사용할 이름이고 우변은 부모컴포넌트에 선언된 함수 이름이다.
호출은 자식 컴포넌트에서
...
callParent () {
const arg01 = 'value-arg01'
const arg02 = 'value-arg02'
this.$emit('for-child', arg01, arg02)
}
...
위 부분을 참고하시믄 되겠다~
