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方法点下后即触发父组件的监听事件。