紀錄一下我的作品當中點擊get details按鈕跳出Popup組件，按下叉叉可關閉Popup組件的操作。

父組件MenusDetails.vue

<template>
    <div class="menusdetails">
        <div class="menusdetails__content">
            <a href="javascript:void(0);" class="btn btn--2" @click="showPopup">get details</a>
        </div>
        <Popup :is-show="show" 
                @hide="hidePopup">
        </Popup>
    </div>
</template>
<script>
import Popup from '@/components/Popup';
export default {
    name:'MenusDetails',
    data(){
        return{
            show:false
        }
    },
    components:{
        Popup
    },
    methods:{
        showPopup(){
            this.show = true;
        },
        hidePopup() {
            this.show = false;
        }
    }
</script>

<a>標籤的連結我使用javascript:void(0);阻止頁面連結跳轉，這樣點下get details按鈕讓Popup.vue出現後網址不會變動。
@hide監聽子組件觸發hide事件，執行hidePopup方法。

子組件Popup.vue

<template>
    <div class="popup" v-show="isShow">
        <div class="popup__dialog">
            <a href="#" class="popup__close" @click="closePopup">×</a>
        </div>
    </div>
</template>
<script>
export default {
    name:'Popup',
    props:{
        isShow:Boolean
    },
    methods:{
       closePopup(){
            this.$emit('hide');
       }
    }
</script>

子組件使用props接收父組件is-show的值，這邊要改成駝峰式命名法轉換成isShow，值為Boolean。
在叉叉上加上一個closePopup方法，使用$emit方法點下後即觸發父組件的監聽事件。