对el-dialog弹窗组件的优雅封装和传值

这篇文章我要解决两个重点问题：
第一、列表中点击【编辑】弹窗然后进行优雅的传值并且可以修改；
第二、我要用.sync修饰符实现隐藏显示弹窗的属性双向绑定，隐藏(关闭)弹窗的时候并不一定非要在父组件里改变属性，从而在代码实现层面上看更优雅；

先创建组件小区编辑弹窗AreaEditDialog.vue组件，也就是子组件，直接上代码如下：

<template>
  <el-dialog
    title="修改小区信息"
    :visible.sync="dialogVisible"
    width="30%">
    <el-form :model="editArea2" ref="areaForm">
      <el-form-item label="小区名称：">
        <el-input v-model="editArea2.name" class="input-width"></el-input>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="handleCancel">取 消</el-button>
      <el-button type="primary" @click="handleConfirm">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>

export default {
  props: {
    editArea: {
      type: Object,
      default: () => Object.assign({},{name:'',id:0})
    },
    show: {
      type: Boolean,
      default: false
    }
  },
  data(){
    return {
      editArea2: Object.assign({},this.editArea)
    }
  },
  computed: {
    dialogVisible: {
      get(){
        return this.show
      },
      set(val){
        this.$emit('update:show',val)
      }
    }
  },
  watch: {
    editArea(val){
      let temp = this.$lodash.cloneDeep(val);
      this.editArea2 = temp;
    }
  },
  methods: {
    handleCancel(){
      this.dialogVisible = false
      this.$emit('cancel')
    },
    handleConfirm(){
      this.$emit('confirm',this.editArea2)
    }
  }
}
</script>

<style lang="scss" scoped>
.el-dialog__footer {
  text-align: center !important;
}
</style>

父组件中调用很简单，直接拷贝过来：

<AreaEditDialog
   :show.sync="dialogVisible"
   :editArea="editArea"
   @confirm="handleConfirm">
</AreaEditDialog>

当然了，我定义了还定义了两个属性和一个方法，我也拷贝过来

import AreaEditDialog from './components/AreaEditDialog.vue';
const defaultArea = {
   name:'',
   id:0
};
export default {
    components:{
      AreaEditDialog
    },
    data() {
      return {
        dialogVisible:false,
        editArea:Object.assign({},defaultArea)
      }
    },
    methods:{
      handleUpdate(index, row) {
        this.dialogVisible = true;
        this.editArea = row;
      },
    }
}

为方便以后查看，在此做个记录；也方便他人做参考，有引用三方库或不清晰的地方，可随时与我交流！