基于elementui开发组件，以el-dialog为例

 文件结构：组件写在components文件夹下

 eldialog.vue文件内容

<template>
    <div>
        <el-dialog custom-class="edition-dialog" :visible.sync="dialogVisible" width="560px"  :before-close="diaclose">
            <div>
                <div>{{ title }}</div>
                <div>{{ content }}</div>
                <span slot="footer" class="dialog-footer">
                    <!-- <el-button @click="dialogVisible = false">取 消</el-button> -->
                    <el-button @click="diaclose">确认</el-button>
                </span>
            </div>
        </el-dialog>
    </div>
</template>
<script>
export default {
    name: 'eldialog',
    props: {
        title: {
            type: String,
            default: "通知"
        },
        dialogVisible: {
            type: Boolean,
            default: true
        },
        content: {
            type: String,
            default: '此处省略200字...'
        },
    },
        methods: {
            diaclose() {
               this.$emit("closeeldialog")
            }
        }
    }
</script>

 在需要用组件的文件中使用方法如下

<template>
    <div>
        <eldialog :title="title" :dialogVisible="visible" @closeeldialog="diaclose" :content="content"></eldialog>
    </div>
</template>
<script>
import eldialog from '@/components/eldialog';
export default {
    components: {
        eldialog
    },
    data() {
        return {
            title: '大家听我说一句',
            content: '上次听见这种话还是在上次',
            visible: true
        }
    },
    methods: {
        diaclose() {
            this.visible = false;
        }
    },
}
</script>

 在main.js中

import eldialog from "./components/eldialog.vue"
Vue.component("eldialog",eldialog);