vue学习之组件封装-dialog

问题：

做项目时经常会遇到添加和编辑的需求，虽然是两种需求但是两者非常的相像。

未组件封装时：

<el-dialog title='添加'>
<el-dialog>
<el-dialog title='编辑'>
<el-dialog>

这样需要创建两个dialog，但是两者除了标题，一个表单中带数据一个不带，请求接口不一致，其它的全部一样，这样就会造成代码冗余。

组件封装后：

<el-dialog :title='title'>

<el-dialog>

这样就可以通过是否有数据传入来判断是编辑还是添加，从而动态的设置标题等不一致的部分。

例子（步骤）：

1.在同目录下创建一个edit-dialog.vue文件

重要代码：

  props:{
        entity: {
          type: Object
        }
      },
computed:{
      isEdit() {
        return this.entity && this.entity.id
      },
      dialogTitle() {
        return this.isEdit ? '编辑' : '添加'
      },
    },

2.在父组件中引入并注册

//1.引入  
import EditDialog from './edit-dialog.vue'
//2.注册
components:{
     
      EditDialog
    },
//3.使用
    <edit-dialog v-model="editDialogVisible"  :entity="editedCommodityClassify" @change="handleChange"> </edit-dialog>

：entity为父组件给子组件（edit-dialog）传递的值，为null代表创建反之为编辑