[Nuxt.js] Component간 데이터 바인딩 props, $emit 을 이용한 popUp구현

Nuxt(vue)를 사용함에 있어 component간의 데이터 바인딩을 위해 props와 emit을 사용한다 일단 두 기능의 특성을 알아보자

props

prop는 부모 Component의 정보를 자식 Component로 전달하기 위해 사용하는 사용자 지정 특성이다.

자식 Component는 props 옵션을 사용하여 수신 할 것으로 기대되는 props를 명시적으로 선언해 사용한다.

 

emit

emit은 다른 Component에게 현재 Component의 Event나 Data를 전달하기 위해 사용할 수 있다.
EX : 자식 컴포넌트에서 사용자지정 이벤트를 만들어 부모 컴포넌트에게 전달

받아올 다른 Component에서는 @emit으로받아올event명="현재 컴포넌트에서 사용할 Event 명" 형식으로 선언하고,

emit을 사용하는 Component에서 this.$emit('@에서 작성한 emit 명칭', 현재 컴포넌트에서 전송할 Event나 Data 명) 형식으로 보내줄 수 있다.

 

부모 Component(호출 하는 컴포넌트)

<template>
 <div>
     <button @click="openPopup('popup_1')">popup_1</button>
     <button @click="openPopup('popup_2')">popup_2</button>
     <P>ThemeCode = {{themeData.themeCode}}</P>
     <P>ThemeName = {{themeData.themeName}}</P>
     <PopupDemo v-if="showPopup" 
         :popupName = "popupName"
         @closePopup = "closePopup"
         @selectTheme = "selectTheme"
     />
 </div>
 </template>
 <script>
 export default {
     data(){
         return{
             popupName : '',
             themeData:{
                 themeCode: '',
                 themeName: ''
             } ,
             showPopup : false
         }
     },
     methods: {
         openPopup(popupKind){
             this.popupName = popupKind;
             this.showPopup = true;
         },
         closePopup(){
             this.showPopup = false;
         },
         //PopupDemo 컴포넌트에서 가지고 온 데이터 할당
         selectTheme(themeData){
             console.log(themeData)
             this.themeData = themeData;
             this.showPopup = false;
         }
     }
 }
 </script>

🔴 :popupName = "popupName"

• :자식 컴포넌트에서 받을 변수 = "부모 컴포넌트에서 넘겨줄 데이터"
• 오른쪽의 값을 자식 컴포넌트 특정 변수(popupName)에게 넘겨준다는 의미

---

🔴 @closePopup = "closePopup"

🔴 @selectTheme = "selectTheme"

• 부모 컴포넌트에서(Pupup.vue) @emit으로받아올event명="현재 컴포넌트에서 사용할 Event 명" 형식으로 선언
• 자식 컴포넌트에서(PupupDemo.vue) this.$emit('@에서 작성한 emit 명칭', 현재 컴포넌트에서 전송할 Event나 Data 명) 형식으로 보내준다
• this.$emit('@에서 작성한 emit 명칭') 이렇게 사용 부모컴포는트의 Event만 실행한다.

자식 Component(호출 되는 컴포넌트)

<template>
	<div>
    	<ul class="category-sub-tree">
            <li>
                <input type="radio" value = "data1" v-model="themeData.themeCode"><span>data1</span>
            </li>
            <li>
                <input type="radio" value = "data2" v-model="themeData.themeCode"><span>data2</span>
            </li>
            <li>
                <input type="radio" value = "data3" v-model="themeData.themeCode"><span>data3</span>
            </li>
            <li>
                <input type="radio" value = "data4" v-model="themeData.themeCode"><span>data4</span>
            </li>
        </ul>
	<div>
</template>
<script>
export default {
    data(){
        return{
            themeData: {
                themeCode: '',
                themeName: ''
            }
        }
    },
    props : {
        popupName :{
            type: String
        }
    },
    methods:{
        closePopup(){
            //부모 컴포넌트에서 Data, event 전달
            //this.$emit('부모에서 @작성한 emit 명칭')
            this.$emit('closePopup')
        },
        selectData(){
            //실 사용시 themeCode를 이용해 매핑 후  themeName 값 구하기 
            this.themeData.themeName = this.themeData.themeCode
            //부모 컴포넌트에세 Data, event 전달
            //this.$emit('부모에서 @작성한 emit 명칭', 현재 컴포넌트에서 전송할 Event나 Data 명)
            this.$emit('selectTheme', this.themeData)
        }
    }
}
</script>