Vue中如何对ElementUI的Dialog组件封装

目录对ElementUI的Dialog组件封装.sync修饰符说明总结对ElementUI的Dialog组件封装1.子组件的写法el-dialogtitle=提示:visible.s...

目录

对ElementUI的Dialog组件封装

1.子组件的写法

<el-dialog
  title="提示"
  :visible.sync="visible"
  :close-on-click-modal="false"
  @close="QualityDialogClose"
>

  <span slot="footer" class="dialog-footer">
    <el-button @click="QualityDialogClose">取 消</el-button>
    <el-button type="primary" @click="QualityDialogClose">确 定</el-button>
  </span>
</el-dialog>

<script>
export default {
  name: "QualityDialog",
  components: {},
  props: {
    QualityDialogFlag: {
      default: false
    },
  },
  data() {
    return {
      visible: false
    };
  },
  created() {},
  mounted() {},
  methods: {
    QualityDialogClose() {
      this.$emit("update:QualityDialogFlag", false);
    }
  },
  watch: {
    QualityDialogFlag() {
      this.visible = this.QualityDialogFlag;
    },
  }
};
</script>

2.父组件的写法

注意：父组件在给子组件传值的时候必须使用.sync, 不然会出现实时监控失败

<template>
 <QualityDialog :QualityDialogFlag.sync="QualityDialogFlag"/>
 <el-button type="primary" @click="QualityClick">打开Dialog</el-button>
</template>
<script>
export default {
  components: {
    QualityDialog: ()=> import("./QualityDialog")
  }
  props: {
    QualityDialogFlag: {
      default: false
    },
  },
  data() {
    return {
      /** QualityDialog 组件需要的数据 */
      QualityDialogFlag: false
      /** QualityDialog 组件需要的数据 */
    };
  },
  methods: {
    QualityClick() {
      this.QualityDialogFlag = true
    }
  }
};
</script>

.sync 修饰符说明

可以通过.sync修饰符来达到双向绑定的效果

@close="$emit('update: QualityDialogFlag' , false)"

说明改变父组件的数据

1.不添加.sync修饰符, 虽然在关闭弹框的时候修改了父组件的数据，但是下次再次打开的时候就会失败，原因是父组件没有监听到子组件的数据改变，父子组件没有双向绑定

父组件

<QualityDialog :QualityDialogFlag="QualityDialogFlag" :QualityDialogData="QualityDialogData"/>

子组件

<el-dialog
  title="提示"
  :visible.sync="visible"
  :close-on-click-modal="false"
  @close="$emit('update: QualityDialogFlag' , false)"
>
</el-dialog>

data() {
  return {
    visible: this.QualityDialogFlag
  };
},
watch: {
 QualityDialogFlag() {
   this.visible = this.QualityDialogFlag;
 }
}

2.添加.sync 修饰符，添加之后可以实现父子组件的双向绑定，当子组件修改父组件转递的数据之后，父组件可以获取子组件的数据

父组件

<QualityDialog :QualityDialogFlag.sync="QualityDialogFlag" :QualityDialogData="QualityDialogData"/>

子组件写法不变

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。