[Vue.js] 06.1 컴포넌트끼리의 통신

데이터통신하면 학부시절 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)
    }

...

 

위 부분을 참고하시믄 되겠다~