vue组件使用props、$emit传递数据

纪录一下我的作品当中点击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方法点下後即触发父组件的监听事件。