zoukankan      html  css  js  c++  java
  • 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;
    }
    

  • 相关阅读:
    Django基础(一)
    CSS
    HTML
    python之路_面向对象
    python之路第六篇
    python之路第四篇
    python之路第三篇
    python之路第二篇
    python之路第一篇
    hdu 3551(一般图的匹配)
  • 原文地址:https://www.cnblogs.com/IwishIcould/p/12459659.html
Copyright © 2011-2022 走看看