您好,登錄后才能下訂單哦!
本篇內(nèi)容主要講解“Vue中怎么對ElementUI的Dialog組件封裝”,感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷,實用性強。下面就讓小編來帶大家學習“Vue中怎么對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, 不然會出現(xiàn)實時監(jiān)控失敗
<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 組件需要的數(shù)據(jù) */ QualityDialogFlag: false /** QualityDialog 組件需要的數(shù)據(jù) */ }; }, methods: { QualityClick() { this.QualityDialogFlag = true } } }; </script>
可以通過.sync修飾符來達到雙向綁定的效果
@close="$emit('update: QualityDialogFlag' , false)"
說明改變父組件的數(shù)據(jù)
1.不添加.sync修飾符, 雖然在關閉彈框的時候修改了父組件的數(shù)據(jù),但是下次再次打開的時候就會失敗,原因是父組件沒有監(jiān)聽到子組件的數(shù)據(jù)改變,父子組件沒有雙向綁定
父組件
<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 修飾符,添加之后可以實現(xiàn)父子組件的雙向綁定,當子組件修改父組件轉(zhuǎn)遞的數(shù)據(jù)之后,父組件可以獲取子組件的數(shù)據(jù)
父組件
<QualityDialog :QualityDialogFlag.sync="QualityDialogFlag" :QualityDialogData="QualityDialogData"/>
子組件寫法不變
到此,相信大家對“Vue中怎么對ElementUI的Dialog組件封裝”有了更深的了解,不妨來實際操作一番吧!這里是億速云網(wǎng)站,更多相關內(nèi)容可以進入相關頻道進行查詢,關注我們,繼續(xù)學習!
免責聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權內(nèi)容。