vue监听子组件的prop属性从而实现响应式解耦

WatchProp_Children.vue

<template>
  <!-- 添加图像的dialog -->
    <el-dialog
      title="上传X线片"
      :visible.sync="addDiagnoseDialogVisible"
      width="30%"
      center>
      <span slot="footer" class="dialog-footer">
        <el-button @click="addDiagnoseDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="saveXRay">确 定</el-button>
      </span>
    </el-dialog>
</template>

<script>
export default {
  name: 'imgUploadDialog',
  data () {
    return {
      addDiagnoseDialogVisible: false
    }
  },
  props: ['visiable'],
  watch: {
    visiable: function (newVal, oldVal) {
      this.addDiagnoseDialogVisible = this.visiable
    }
  }
}
</script>

WatchProp_Parent.vue

<template>
  <div>
    <div class="opera-area">
      <el-button type="primary" size="small" @click="addDiagnoseDialogVisible = true">添加诊断信息</el-button>
    </div>
    <img-upload-dialog :visiable="addDiagnoseDialogVisible"></img-upload-dialog>
  </div>
</template>

<script>
import authImg from '@c/commons/authImg.vue'
import imgUploadDialog from '@c/commons/imgUploadDialog.vue'
import fs from 'fs'
import electron from 'electron'
export default {
  name: 'patientDiagnoseResult',
  components: {
    authImg, imgUploadDialog
  },
  props: ['patient'],
  data () {
    return {
      addDiagnoseDialogVisible: false
    }
  }
}