温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

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

发布时间:2023-03-11 10:46:49 来源:亿速云 阅读:132 作者:iii 栏目:开发技术

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

对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"/>

子组件写法不变

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

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI