鍍金池/ 問答/Python  HTML/ 兩層嵌套的dialog修改visible值會修改兩次，該如何解決？

兩層嵌套的dialog修改visible值會修改兩次，該如何解決？

問題描述

我的兩層組件分別是
最外層父組件，負責子組件層彈框的是否顯示

子組件是我自己封裝的彈框組件，

我需要父組件控制子組件彈框組件是否顯示，

然后子組件也能控制自己的彈框組件是否顯示

問題出現(xiàn)的環(huán)境背景及自己嘗試過哪些方法

相關代碼

父組件代碼： 父組件會修改 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)
  }
},

你期待的結果是什么？實際看到的錯誤信息又是什么？

我這么寫了之后，功能可以實現(xiàn)，但是每次修改dialogVisible和dialogVisibleProp都會導致這兩個值互相修改兩次

如何解決這個問題呢？謝謝

回答
編輯回答
毀與悔

用計算屬性實現(xiàn)吧，邏輯更清晰

 props: {
  dialogVisible: {
    type: Boolean,
    default: false
  },
},
computed: {
  dialogVisibleProp: {
    get() {
      return this.dialogVisible
    },
    set(v) {
      this.$emit('update:dialogVisible', v);
    }
  }
}
2017年2月27日 01:44