Vue中怎么對ElementUI的Dialog組件封裝

本篇內容主要講解“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組件封裝”有了更深的了解，不妨來實際操作一番吧！這里是億速云網站，更多相關內容可以進入相關頻道進行查詢，關注我們，繼續學習！