Two layers of nested dialog change the visible value will be changed twice, how to solve it?

problem description

my two-tier components are respectively
outermost parent components, which are responsible for whether the pop-up box of the child component layer is displayed

.
Mar.28,2021

use computational attributes to make the logic clearer

 props: {
  dialogVisible: {
    type: Boolean,
    default: false
  },
},
computed: {
  dialogVisibleProp: {
    get() {
      return this.dialogVisible
    },
    set(v) {
      this.$emit('update:dialogVisible', v);
    }
  }
}
Menu