[$emit] 모달 컴포넌트(팝업)

팝업 동작

 

https://webruden.tistory.com/925#google_vignette

Vue emit 사용법 및 간단 예제 (How to Emit Data in Vue)

 

위 참조된 링크의 게시물에서 설명한 $emit 개념을 활용하여 모달 컴포넌트를 생성해보았다.

openPop이라는 변수를 활용하여 true면 모달을 표출, false라면 모달을 닫는 구조이다.

 

부모컴포넌트에서 openPop와 그에 대한 기능들(닫기, 열기)을 정의하고,

자식 컴포넌트에서 특정 요소 클릭시 $emit을 통해 @closePop이라는 이벤트를 활용할 수 있게 하며,

@closePop에 작동할 동작을 정의함으로써 openPop변수 값을 변경하여 모달을 여닫을 수 있도록 하는 흐름으로 작업하였다.

 

부모컴포넌트

<template>

    <!-- 자식 컴포의 $emit을 통해서 부여된 @closePop이라는 이름의 함수를 해당 부분에서 정의 -->
    <PopWrite v-bind:pop-check="openPop" @closePop="closeOfWrie()" />
    
    <!-- 해당 요소 클릭시, popOfWriter()함수 동작하여 openPop변수가 true처리 됨 -->
    <input @click="popOfWrite()" type="text" :value="userName" readonly/>
</template>

<script>
    import PopWrite from "@/components/contentBox/PopWrite";

    export default {
        name: "ContentBox",
        components: {
            PopWrite
        },
        methods :{
            popOfWrite: function(){
                this.openPop=true;
            },
            closeOfWrie: function(){
                this.openPop=false
            }
        },
        data() {
            return {
                openPop: false //해당 변수가 true일때만 모달창 표출
        }
    }
</script>

<style scoped>
 /* 스타일 생략 */
</style>

 

 

---

 

 

자식컴포넌트

<template>
    <!-- 모달 구현을 위한 배경 포함 화면 -->
    <div id="popback" v-if="popCheck==true">
        <!-- 팝업 영역 -->
        <div id="pop">

            <div class="header borderBtm">
                <h1>게시물 작성하기</h1>
                <img @click="$emit('closePop')" id="close" src="https://img.icons8.com/color/512/close-window.png"
                     alt="닫기버튼"/>
            </div>
            <div class="content">
                <div class="writer">
                    <img class="profileImg" :src="userData.profile"
                         alt="profile"/>
                    <div>
                        <h3>{{userData.name}}</h3>
                        <p>{{thisTime}}</p>
                    </div>
                </div>
                <div class="write">
                    <textarea :placeholder="userName" id="writeInput"></textarea> <!-- 개행을 위한 태그 -->
                </div>
            </div>
            <div class="button">
                <button>게시</button>
            </div>

        </div>
        <!-- /팝업 영역 -->
    </div>
    <!-- /모달 구현을 위한 배경 포함 화면 -->
</template>

<script>
    export default {
        name: "PopWrite",
        props: {
            popCheck: Boolean,
            userData: Object
        }
    }
</script>

<style scoped>
 /* 생략 */
</style>

 

 

 

 

모든 코드를 담은 프로젝트 소스는 아래에 첨부하였다.

https://github.com/Hamjeonghui/vue.git

GitHub - Hamjeonghui/vue: Vue 프레임워크를 활용하여, Face Book의 구조를 벤치마킹하여 구현해냄

 

---

 

 

해당 작업을 진행하면서 참고한 블로그 링크들을 아래에 나열하였다.

https://velog.io/@7p3m1k/vue-%EB%AA%A8%EB%8B%AC-%EC%BB%B4%ED%8F%AC%EB%84%8C%ED%8A%B8modal-emit-%EC%82%AC%EC%9A%A9%ED%95%98%EA%B8%B0

[vue] 모달 컴포넌트(modal $emit) 사용하기

https://ssjeong.tistory.com/entry/VUE-%EC%9E%90%EC%8B%9D-%EC%BB%B4%ED%8F%AC%EB%84%8C%ED%8A%B8%EC%97%90%EC%84%9C-%EB%B6%80%EB%AA%A8-function-%EC%82%AC%EC%9A%A9%ED%95%98%EA%B8%B0-emit-emits

 

[VUE] 자식 컴포넌트에서 부모 function 사용하기 (emit, emits)