element-ui封装dialog组件的代码教程

封装组件：

<template>  
    <p>  
        <el-dialog  
            title="title"  
            :visible.sync="visible"  
            @close="$emit('update:show', false)"  
            :show="show">  
            <span>this is a dialog</span>  
        </el-dialog>  
    </p>  
</template>  
  
<script>  
    export default {  
        data () {  
            return {  
                visible: this.show  
            };  
        },  
        props: {  
            show: {  
                type: Boolean,  
                default: false  
            }  
        },  
        watch: {  
            show () {  
                this.visible = this.show;  
            }  
        }  
    };  
</script>  

使用组件：

<template>  
    <p>  
        <service-dialog :show.sync="show"></service-dialog>  
        <el-button @click="open">click</el-button>  
    </p>  
</template>  
  
<script>  
    import serviceDialog from './serviceDialog'  
  
    export default {  
        data () {  
            return {  
                show: false  
            };  
        },  
        methods: {  
            open () {  
                this.show = true;  
            }  
        },  
        components: {  
            serviceDialog  
        }  
    };  
</script>