element ui el-dialog

Question

data(){
dialogVisible: false
}

<el-button
  icon="el-icon-caret-right"
  size="mini"
  class="table_button"
  @click="handlePlay(scope.row)"
  >播放</el-button>

handlePlay(row) {
      if (row.recording) {
        this.play();
      } else {
        this.$message({
          message: "播放失败！管理员似乎没有上传录音！",
          type: "warning",
        });
      }
    }

play() {
      this.dialogVisible = true;
      this.$nextTick(() => {
        this.$refs.audio.play();
      });
    }

<el-dialog
                title="录音播放"
                :visible.sync="dialogVisible"
                :before-close="stop"
              >
                <template>
                  <center>
                    <audio
                      :src="src"
                      :autoplay="autoplay"
                      :controls="controls"
                      style="width: 500px"
                      ref="audio"
                    >
                      Your browser does not support the audio element.
                    </audio>
                  </center>
                </template>
              </el-dialog>

为什么visible属性要加上sync修饰符

Answer 1

https://cn.vuejs.org/v2/guide...

el-dialog组件中点击关闭按钮或者取消按钮，会关闭他里面控制弹框的变量，并调用this.$emit('update:visible', false)通知父组件，如果父组件不加sync就不能自动修改父组件visible的值，数据会有冲突，再次打开弹框，会打不开，因为visible还是true