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-dialogtitle="新增日程"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-buttonsize="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>