Popover点击内嵌表单取消显示

Popover点击内嵌表单取消显示

这是自己的第一次学习记录，刚入职场，很多东西还很陌生，先记录一下今天工作遇到的问题

一、要实现的功能

1. 点击按钮
   
   2.点击提交关闭这个Popover弹出框

二、解决方法

在网上查找了很多方法，但由于我的弹出框是个子组件所以请教了大神后代码如下：

<!--index.vue-->
<el-popover placement="bottom-start" width="800" trigger="click" vmodel="isShow" >
                <RecordsSearch :searchList="searchInfo" :codeList="codeInfo" :hosUserList="hosInfo" @sendPersonTable='getPersonTable' />
                <el-button type="primary" icon="el-icon-search" slot="reference" >查询详细数据</el-button>
             </el-popover>

v-model绑定一个变量，初始值为false

//index.js
data() {
        return {
        	isShow:false,
        }
 }
 //methods
 getPersonTable(data,bol){
            this.personRecords = data.data            
            this.total = data.total
            this.isShow = bol
        },

getPersonTable是用来接收组件里传回来的值，给一个形参bol接收，这里的形参可以自己定义。

//RecordsSearch页
 methods: {
        submitBtn(){
            let newPagination = {
                "rows":10,
                "page":1,
                "sidx":"",
                "sord":"ASC",
                "records":0,
                "total":0
            }
            this.$get('/file/.../..?pagination='+JSON.stringify(newPagination)+'&query_json='+ JSON.stringify(this.form)).then(res=>{
                if(res.code == '0'){
                    this.$emit('sendPersonTable',res.data,false)

                }
                //console.log(this.form.ExamDateStart)
            })
        }
    }
   

submitBtn方法里使用$emit将接口中获取到的值传回给父组件，顺便将我需要的bol值也传回去。
至此，popover可以在点击了提交后关闭。