element-ui 的el-Popover 自定义控制弹出和关闭

 <el-popover
                          placement="right"
                          width="400"   v-model="dialogVisible"
                          trigger="manual">
                          <p>请录入5个手机号</p>
                          <el-table ref="tableMoble" :data="tableMoble.tableData"
                                    tooltip-effect="dark" stripe  border :show-header="false">
                            <el-table-column prop="serialNumber">
                              <template slot-scope="scope">
                                <el-input v-model="scope.row.serialNumber"
                                          :maxlength="16"
                                          :disabled="isMobleCanRead"
                                          onKeyUp="value=value.replace(/[\W]/g,'')"
                                          placeholder="请输入手机号，例如13545874455"
                                          @blur="test(scope.row)"
                                ></el-input>
                              </template>
                            </el-table-column>
                          </el-table>
                          <div style="text-align: right; margin: 0">
                            <el-button type="primary" size="mini" @click="ok" v-if="!isDisabled" >保存</el-button>
                            <el-button size="mini" type="text" @click="close">取消</el-button>
                          </div>
                          <el-button type="primary" slot="reference" :disabled="isShowAttach" @click="showDialog">备用手机号</el-button>
                        </el-popover>

 

dialogVisible:false ,  //是否显示浮窗
tableMoble:[], //表格数据

showDialog(){
//准备 tableMoble.tableData数据
dialogVisible=true
}

这个浮窗是自定义控制住了，但是发现有个问题，父页面关闭了的话，这个浮窗不会自动关闭，这时候需要对父页面的显示控制变量 添加监控