Vue中怎么对ElementUI的Dialog组件封装

本篇内容主要讲解“Vue中怎么对ElementUI的Dialog组件封装”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“Vue中怎么对ElementUI的Dialog组件封装”吧!

对ElementUI的Dialog组件封装

子组件的写法

<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>

父组件的写法

注意：父组件在给子组件传值的时候必须使用.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 {                        QualityDialogFlag: false                    };    },    methods: {        QualityClick() {            this.QualityDialogFlag = true        }    }};</script>

.sync 修饰符说明

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

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

说明改变父组件的数据

不添加.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;   }}

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

父组件

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

子组件写法不变

到此，相信大家对“Vue中怎么对ElementUI的Dialog组件封装”有了更深的了解，不妨来实际操作一番吧！这里是编程网网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！