两层嵌套的dialog修改visible值会修改两次，该如何解决？

Question

我的两层组件分别是最外层父组件，负责子组件层弹框的是否显示子组件是我自己封装的弹框组件，我需要父组件控制子组件弹框组件是否显示，然后子组件也能控制自己的弹框组件是否显示父组件代码： 父组件会修改 dialogVisible 的值 <betting-object-dialog :dialog-visible.sync="dialogVisible"></betting-object-dialog>自己封装的子组件代码，使用了element的el-dialog组件，子组件会通过事件修改dialogVisibleProp，el-dialog也会在内部修改dialogVisibleProp<template>   <el-dialog title="修改日期时间" :visible.sync="dialogVisibleProp">123</el-dialog> </template> props: ['dialogVisible'], data() {   return {     dialogVisibleProp: this.dialogVisible   } }, watch: {   dialogVisible() {       this.dialogVisibleProp = this.dialogVisible   },   dialogVisibleProp() {       this.$emit('update:dialogVisible', this.dialogVisibleProp)   } },我这么写了之后，功能可以实现，但是每次修改dialogVisible和dialogVisibleProp都会导致这两个值互相修改两次如何解决这个问题呢？谢谢

Answer 1

用计算属性实现吧，逻辑更清晰

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