Props 설정 방법 활용

props는 팝업, 모달, component 등등 추가로 필요한 화면에 값을 전달 하기 위해서 사용 합니다.

처음 아 .... 도대체 어떻게 해야 저어어어창에대가 값을 전달 하지 ㅡ.ㅡ 하고 고민 하고 예제를 찾아서

구글링을 했던게 기억이 나네요

일단 간단하게 a.vue에서 b.vue에 값을 전달 하고 전달 받아 보도록 하겠습니다.

일단 전 a.vue와 b.vue를 만들었습니다. a.vue에서 b.vue를 modal처럼 띄우려고 합니다.

a.vue

<template>
<div>
<div @click="modalOpen">모달 띄울꺼임</div>
<b-modal v-if="consultView" 
	:rowInfo="rowInfo"
    @cancelButton="cancelButton"
    @saveComplte="saveComplte">
</b-modal>
</div>
</template>
<script>
import bModal from '../component/modal/b.vue'

export default {
  components: {
    aModal
  },
  data () {
    return {
      consultView: false,
      rowInfo: []
    }
  },
  methods: {
    cancelButton (item) {
      this.consultView = false
      console.log(item)
    },
    saveComplte (item) {
      this.consultView = false
      console.log(item)
    },
    modalOpen () {
      this.consultView = true
    }
  }
}
</script>

자 이렇게 하면 일단 b.vue내용이 우리가 알고 있는 modal처럼 보일 겁니다.

하나하나 찾아보죠

1. b.vue 를 import를 한다음 components에 해당 이름을 넣어주고 template안에 태그(<b-modal>)를 넣어 줍니다

  해당 태그는 자동완성이 도와줄테니 넘기시고~

2. b.vue화면을 보이고 안보이고 할 consultView를 만듭니다. 

3. consultView를 보여줄 modalOpen함수를 하나 만들어 줍니다.

4. 제일 중요한 부분은

<b-modal v-if="consultView" 
:rowInfo="rowInfo"
    @cancelButton="cancelButton"
    @saveComplte="saveComplte">
</b-modal> 이거 입니다. 여기서 : <---이 표시는 b.vue에 전달 할 변수와 값을 셋팅 하는 부분입니다 필요한 만큼 마음대로 추가하셔도 됩니다. :a="1" :b="2" :c="3"......이렇게 셋팅을 할 수 있습니다. 그리고 뒤에 @으로 표시되어 있는건 b.vue에서 값을 내려 받을 때 필요한 셋팅 입니다. @는 많이 보셨죠? 그렇습니다. function입니다. b,vue에 가서 보겠지만 @뒤에 붙은 이름으로 emlit해주게 되어 있습니다.

이것만 알고 가죠 : <===이거는 b.vue에 전달 할 값 @는 b.vue에서 받을 값을 셋팅 한다.

자 이제 a.vue는 셋팅이 끝났습니다.