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>