自定义弹窗显示问题？

Question

dialog组件使用visible这个prop开控制显示，监听visible赋值给visibleMe
v-if=“visibleMe”的方式打开关闭弹窗
关闭的时候令visibleMe=false，但是因为visible是prop，不可以在这个组件内更改，所以visible还是true
所以下次调用它的组件再把visible改成true的时候，并不会触发watch
怎么通过只改dialog组件的代码实现这个？

Answer 1

<template>
  <div v-if="visibleMe">
    <!-- 内容 -->
  </div>
</template>

<script>
export default {
  props: {
    visible: Boolean,
  },
  data() {
    return {
      visibleMe: this.visible, 
    };
  },
  watch: {
    visible(newVal) {
      this.visibleMe = newVal; 
    },
  },
  methods: {
    closeDialog() {
      this.visibleMe = false;
      this.$emit('update:visible', false); 
    },
  },
};
</script>