elementUI封裝 el-dialog

講解

// 講解：  @close="$emit('update:show1', false)"是子元件跟新父元件中的某值show1，将值變為false 
// :visible.sync="visible"  visible值為true顯示,否者隐藏
// data中如何直接取props中的值，直接this.XXX
//使用watch監聽的原因是因為，解決框隻能購打開一次。
           

元件.vue

<template>
    <div>
      <el-dialog
            title="title"
            :visible.sync="visible"
            @close="$emit('update:show1', false)"
           >
            <div>this is a dialog</div>
        </el-dialog>
    </div>
</template>

<script>
export default {
      data () {
            return {
                visible: this.show1
            };
        },
        props: {
           show1: {
                type: Boolean,
                default: false
            }
        },
        watch: {
            show1 () {
                this.visible = this.show1;
            }
        }
}
</script>
           

使用元件

<mask-add :show1.sync="show1"></mask-add>
<el-button @click="open">click</el-button>

data(){
    retuen{
        show1: false,
    }
}
    
 open () {
   this.show1 = true;
}
           

我們公司正在尋找前端和後端，感興趣的小哥哥或者小姐姐可以私聊我

如果你是大佬，請帶我們飛

如果你是菜鳥，我們帶你飛

僅限成都

作者：明月人倚樓

出處：https://www.cnblogs.com/IwishIcould/

想問問題，打賞了卑微的部落客，求求你備注一下的扣扣或者微信；這樣我好聯系你；(っ•̀ω•́)っ✎⁾⁾！

如果覺得這篇文章對你有小小的幫助的話，記得在右下角點個“推薦”哦，或者關注部落客，在此感謝！

萬水千山總是情，打賞5毛買辣條行不行，是以如果你心情還比較高興，也是可以掃碼打賞部落客(っ•̀ω•́)っ✎⁾⁾！

支付寶

微信

本文版權歸作者所有，歡迎轉載，未經作者同意須保留此段聲明，在文章頁面明顯位置給出原文連接配接

如果文中有什麼錯誤，歡迎指出。以免更多的人被誤導。