vue组件实现弹出框点击显示隐藏效果

<template>  ......  <ul>    <li><span @click="ModifyPassword()">更改密码</span></li> //点击事件  </ul>  ......  //组件传一个点击事件@hidden="hiddenShow"，而这个点击事件就是下面的hiddenShow（）函数  <ModifyPassword @hidden="hiddenShow" v-show="ModifyPassword_pop_up"> </ModifyPassword>  //调用组件</template><script> import ModifyPassword from '@/components/pop-up/ModifyPassword.vue //引入组件 export default {  data(){   return{    date:'',    ModifyPassword_pop_up:false,    history_pop_up:false   }  },  components:{   ModifyPassword //引用组件  },  methods:{   //更改密码弹出框显示（组件引用的弹出框）   ModifyPassword(){    this.ModifyPassword_pop_up=true   },   //更改密码弹出框隐藏（传给组件一个点击事件）   hiddenShow(){    let that = this;    that.ModifyPassword_pop_up = false   }  } }</script>

<template>  ......  <div class="foot">      <input type="button" name="OK" value="提交" class="yes" >      //在取消按钮这里调用点击事件      <input type="button" name="cancel" value="取消" class="no" @click="Hidden()">     </div>  ......</ModifyPassword> </template><script> export default {  data(){   return{}  },  methods:{   //本更改密码弹出框的显示隐藏事件   Hidden(){    //通过$emit引用组件传过来的hidden()事件    this.$emit('hidden')   }  } }</script>