vue - popup 이해

---

🖤 글이 도움이 되었다면 유튜브 클릭 해주세요 🖤

 

---

vue - popup 샘플

 

* 설명이 편하도록 부모 - 자식 (popup) 으로 부르겠다.

---

🤹‍♂️ 부모가 해야할 일 

 

1. 자식을 import 한다

 

import popup from './component/popup'

---

 

2. components 에  자식을 등록한다.

 

components: {
    popup
}

---

 

3 - 1. template 에 자식을 그려준다.

 

<popup />

 

여기까지 하면 popup 창 개념이 아닌 그냥 vue 파일 데려와서 그려준 꼴이 된다.

popup 은 열고 닫히기 때문에 부모 - 자식의 소통이 필요하다.

 

3 - 2. 3번을 3-1이 아닌 3-2 처럼 값을 전달해줘야 한다. 

 

<popup 
:popup-val="popupVal"  
/>

data() {
  return {
  	popupVal : false 
  }
}

 

---

 

4. 자식에게 "너 열릴 차례야 !" 라고 전달해 줄 이벤트가 필요 하다.

 

@click="popupOpen()"

 

methods: {
	popupOpen() {  
        this.popupVal = true
    }
} 

 

---

 

5. 자식이 부모에게 "엄마 나 닫히고 싶어" 라고 말했을 때 닫는 방법도 알려줘야 한다.

 

methods: {
    popupClose: function ( value ) {
         this.popupVal = value
    }
}

 

<popup 
:popup-val="popupVal" 
@close:popup="popupClose"
/>

 

---

 

🤹‍♀️ 자식이 해야할 일

 

1. :visible.sync="popupVal" 를 통해서 부모가 보내준 popupVal 을 전달 받는다.

 

즉 popupVal 이 true 일 경우 보이고 popupVal 이 false 일 경우에는 숨는다.

<template>
    <div>
        <el-dialog 
        :visible.sync="popupVal" 
        :before-close="handleClose"> 
        	<span>HI POPUP<./span>
        </el-dialog>
    </div> 
</template>

 

---

 

2. 하지만 자식이 그냥 :visible.sync="popupVal" 라고 쓴다고 부모의 값을 받는건 아니다.

 

props 를 통해서 받아야 한다. 

 

    props: {
        popupVal: {} 
    }

 

---

 

3 - 1. 자식이 자신 (popup) 을 닫아버리고 싶다면 아래 코드와 같이 handleClose 가 일어난다.

 

<template>
    <div>
        <el-dialog 
        :visible.sync="popupVal" 
        :before-close="handleClose"> 
        	<span>HI POPUP<./span>
        </el-dialog>
    </div> 
</template>

 

 

handleClose(done) {
        this.$confirm('정말 끝내시겠습니까 ? 😡')
            .then(_ => {  
                this.popupClose();
            })
            .catch(_ => {});
} 
        

 

3 - 2. " 진짜 닫을래요 " 

 

부모가 닫는 방법을 알려준대로 호출

 

popupClose() {  
	this.$emit('close:popup', false) 
}

 

---

🧡 비전공자 개발자 #면접썰 #공부썰 #책추천 #실무이야기 좋아요 구독 감사합니다💛

 

---