首頁猿問兩層嵌套的dialog修改visi...

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

犯罪嫌疑人X 2018-07-10 14:18:13

我的兩層組件分別是最外層父組件，負責子組件層彈框的是否顯示子組件是我自己封裝的彈框組件，我需要父組件控制子組件彈框組件是否顯示，然后子組件也能控制自己的彈框組件是否顯示父組件代碼：父組件會修改 dialogVisible 的值 <betting-object-dialog :dialog-visible.sync="dialogVisible"></betting-object-dialog>自己封裝的子組件代碼，使用了element的el-dialog組件，子組件會通過事件修改dialogVisibleProp，el-dialog也會在內(nèi)部修改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都會導致這兩個值互相修改兩次如何解決這個問題呢？謝謝

查看完整描述

1 回答

慕斯709654

TA貢獻1840條經(jīng)驗獲得超5個贊

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

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

反對回復 2018-07-20