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

对ElementUI的Dialog组件封装

1.子组件的写法

              取 消         确 定     

2.父组件的写法

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

.sync 修饰符说明

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

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

说明改变父组件的数据

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

父组件

子组件

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

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

父组件

子组件写法不变

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持0133技术站。