vue使用elementUI中的popover弹出框

封装成一个组件，多次使用
有一个点 看了很多帖子都没有说过这个方法

点击退出 会调用clickConfirm（）把这个方法传到需要使用的组件，之前使用的都是在父组件中点击退出调用下边的hide方法，但是如果在一个列表中循环使用会出现问题，所以何不直接 在点击退出的时候直接在调用退出的方法中把 控制显示隐藏的 PopoverVisible 直接设置成false，岂不是更直接，就不需要再次调用hide方法，还不会出错，目前这个方法并未出现问题，

<template>
  <el-popover
    :placement="placement"
    v-model="PopoverVisible"
    popper-class="PopoverTips"
    visible-arrow="true"
  >
    <div class="PopoverTips__tipsTitle">
      <div class="PopoverTips__tipsTitle--div">
        <img src="../assets/imgs/tipsIcon.png" alt="" />
        <span> {{ PopoverTipsTitle }}</span>
      </div>
    </div>
    <div class="PopoverTips__btn">
      <button class="cancel_btn" @click="PopoverVisible = false">取消</button>
      <button class="confirm_btn" @click="clickConfirm">
        {{ ConfirmName }}
      </button>
    </div>
    //插槽
    <div slot="reference">
      <slot></slot>
    </div>
  </el-popover>
</template>

<script>
export default {
//父传子 传过来的值props接收
  props: {
    PopoverTipsTitle: String,
    btnName: String,
    ConfirmName: String,
    confirmBeforeExit: Boolean,
    placement: String
  },
  data () {
    return {
      PopoverVisible: false, //控制弹框的显示隐藏
      direction: ''  // 因为要多的地方使用所以 在这里定义一下
    }
  },
  methods: {
    clickConfirm () {
       this.PopoverVisible = false 
      this.$emit('clickConfirmBtn')
    },
    show () {
      this.PopoverVisible = true
    },
    hide () {
      console.log('this.PopoverVisible')
      this.PopoverVisible = false
    }
  }
}
</script>

在页面中使用：