vue2.0项目中组件的封装和使用

一、父组件

<add-dialog
    :visible="visibleShow"
    @DialogCancel="visibleShow = false"
    @DialogOk="DialogOk"
></add-dialog>

visibleShow: false,

import addDialog from './component/addDialog.vue';

components: {  
   addDialog,
},     

DialogOk() {
     
},

二、子组件 addDialog.vue

<template>
    <el-dialog
        title="新增日程"
        custom-class="edit-tag" //custom-class	Dialog 的自定义类名
        :visible="visible"
        @close="handleClose"    //close和before-close还是有区别的某些事件会触发close不会触发before-close
        @before-close="handleBeforeClose" //关闭前的回调，会暂停 Dialog 的关闭
        @open="openDialog"
        width="800px"
    >
      <p>子组件内容</p>
      <p style="text-align: center">
            <el-button size="small" @click="handleClose">取 消</el-button>
            <el-button
                size="small"
                type="primary"
                @click="handleSure"
            >
                确 定
            </el-button>
        </p>
    </el-dialog>
</template>

<script>

export default {
    name: 'addDialog',
    props: {
        visible: {
            type: Boolean,
            default: false,
        },       
    },
    data() {
        return {
        
        };
    },

    methods: {
        openDialog() {
            
        },
        handleClose() {
            this.$emit('DialogCancel');
        },
        handleBeforeClose(){
        
        },
        handleSure() {
            this.$emit('DialogCancel');
            this.$emit('DialogOk');
            this.$message({
                message: '新增成功！',
                type: 'success',
                showClose: true,
                offset: 80,
            });               
        },
    },
};
</script>
<style lang="scss" scoped>
.edit-tag{
}
</style>