el-dialog 封装成子组件

1.父组件的写法

 <upload-dialog :upload-visable.sync="dialogFormVisible"></upload-dialog> 

2 子组件的写法;

 ①父组件传过来的值uploadVisible，子组件:visible.sync 不要直接使用，:visible.sync 重新定义一个变量，用watch 监控去关联两者的关系

      如果不暂存，会报 Avoid mutating a prop directly since the value will be overwritten whenever

 ② @close 这里用:before-close也是可以的，不过用before-close需要写成函数

 

<template>
  <div>
    <el-dialog
      title="发布版本"
      :visible.sync="dialogFormVisible" //本地定义的变量
      @close="$emit('update:uploadVisable',false)"
      center
    >
      <el-form ref="dataForm" label-position="left" label-width="90px" style="width: 100%;">
        <el-form-item label="版本文件">
          <el-upload class="upload-demo" action="https://jsonplaceholder.typicode.com/posts/">
            <el-button size="small" type="primary">点击上传</el-button>
            <div slot="tip" class="el-upload__tip">
              Android文件名格式：RSpeedo_android_版本号.apk 例如：RSpeedo_android_0.1.4.apk
              <br />Windows文件名格式：RSpeedo_pc_版本号.exe 例如：RSpeedo_pc_1.1.7.exe
            </div>
          </el-upload>
        </el-form-item>
        <el-form-item label="升级标志">
          <el-checkbox v-model="checked">强制升级</el-checkbox>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="$emit('update:uploadVisable',false)" class="rc-button__cancel">取消</el-button>
        <el-button type="primary" @click="dialogStatus==='create'?createData():updateData()">确认</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>

export default {
  name: '',
  props: {
    uploadVisable: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      checked: false,
      dialogFormVisible: this.uploadVisable //初始化赋值
    }
  },
  updated () {
    console.log("value5:", this.dialogFormVisible)
  },
  watch: {
    uploadVisable (val) {
      console.log("watch:", val)
      this.dialogFormVisible = val
    }
  },
  components: {},
  methods: {
    handleBeforeClose () {
      this.$emit('upload-change')
    }
  }
}
</script>