ElementUI对话框（dialog）提取为子组件

1：新增dialog

父组件：

<template>
    <div class="main-wrap">
        <el-button type="primary" @click="add('addOrder')">添加</el-button>
        <add-order ref="addOrder" :visible.sync=" addOrderVisible"></add-order>
    </div>
</template>
<script>
    import Add from './add.vue'
    export default {
        data(){
            return {
                addOrderVisible: false
            }
        },
        methods: {
            add(refForm){
                if(this.$refs[refForm]){
                    this.$refs[refForm].initForm();
                }
               this.addOrderVisible= !this.addOrderVisible;
            }
        },
        components: {
            'add-order': Add
        }
    }
</script>

子组件：

<template>
  <el-dialog :data="visible" :visible.sync="visible" :show-close="false" width="600px" :modal="true" :close-on-click-modal="false" :close-on-press-escape="false">
    <h2 slot="title">添加订单</h2>
    <button type="button" aria-label="Close" class="el-dialog__headerbtn" @click.stop="cancelModal"><i class="el-dialog__close el-icon el-icon-close"></i></button>
    <el-form class="form-wrapper" ref="orderForm" :model="orderForm" :rules="addRules" label-width="110px">
      <el-form-item label="联系人：" prop="fromContact">
        <el-input v-model="orderForm.fromContact" type="text" placeholder="请输入联系人名称"></el-input>
      </el-form-item>
      <el-form-item label="联系电话：" prop="fromPhone">
        <el-input v-model="orderForm.fromPhone" type="text" placeholder="请输入联系电话"></el-input>
      </el-form-item>
      <el-form-item label="用车时间：" prop="orderTime">
        <el-date-picker
          v-model="orderForm.orderTime"
          :picker-options="minDateOpt"
          type="datetime"
          placeholder="请选择用车时间"
          format="yyyy-MM-dd HH:mm" style="width: 100%;"></el-date-picker>
      </el-form-item>
      <el-form-item label="上车地点：" prop="sname">
        <el-input id="sname" v-model="orderForm.sname" type="text" placeholder="请输入上车地点">
          <i class="el-icon-location-outline el-input__icon" slot="suffix"></i>
        </el-input>
      </el-form-item>
      <el-form-item label="下车地点：" prop="dname">
        <el-input id="dname" v-model="orderForm.dname" type="text" placeholder="请输入下车地点">
          <i class="el-icon-location-outline el-input__icon" slot="suffix"></i>
        </el-input>
      </el-form-item>
      <el-form-item label="车辆类型：" prop="carTypeOpt">
        <el-select v-model="orderForm.carType" multiple placeholder="请选择车辆类型" style="width: 100%;">
          <el-option
            v-for="option in carTypeOptions"
            :key="option.value"
            :label="option.label"
            :value="option.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="用车备注：">
        <el-input v-model="orderForm.remark" type="text" placeholder="请输入用车说明，例：大件行李"></el-input>
      </el-form-item>
    </el-form>
    <div slot="footer" class="buttons-wrap">
      <el-button type="primary">确定</el-button>
    </div>
  </el-dialog>
</template>
<script>
  export default {
    props: {
      visible: {
        type: Boolean,
        default: false
      }
    },
    data(){
      return {
        carTypeOptions: [
          {value: 1, label: '经济型'},
          {value: 2, label: '舒适型'},
          {value: 3, label: '商务型'},
          {value: 4, label: '豪华型'},
          {value: 5, label: '巴士型'}
        ],
        minDateOpt: {
          disabledDate: function (date) {
            return date.getTime()<new Date().getTime() - 3600 * 1000 * 24;
          }
        },
        orderForm: {},
        addRules: {
          fromContact: [{ required: true, message: "请输入联系人姓名", trigger: 'blur'}],
          fromPhone: [{required: true, message: "请输入", trigger: 'blur'}],
          orderTime: [{required: true, message: "请输入", trigger: 'change'}],
          sname: [{required: true, message: "请输入", trigger: 'change'}],
          dname: [{required: true, message: "请输入", trigger: 'change'}],
          carTypeOpt: [{required: true, message: "请输入", trigger: 'blur'}]
        }
      }
    },
    methods: {
      initForm(){
        this.orderForm = {
          companyId: 0,
          fromContact: '',
          fromPhone: '',
          orderTime: '',
          sname: '',
          dname: '',
          carType: [],
          remark: ''
        };
        if(this.$refs.orderForm){
          this.$refs.orderForm.resetFields();
        }
      },
      cancelModal(){
        this.$emit('update:visible', false);
      }
    }
  }
</script>
<style lang="scss" scoped>
  .buttons-wrap {

    .el-button {
      margin-right: 20px;
      min-width: 100px;
    }
  }
  .multiple-input-box .el-input:not(:last-child) {
    margin-bottom: 8px;
  }
</style>

2：在只需要显示详情内容的情况下，也可以采取只把内容放到子组件中，头部和底部按钮都放在父组件中，把需要的参数传到子组件中即可。

父组件：

<template>
    <div class="main-wrap">
        <el-button type="primary" @click="showDetail()">详情</el-button>
        <el-dialog :visible.sync="detailVisible" width="600px" :modal="true">
          <h2 slot="title">详情</h2>
          <detail ref="newOrderDetail" :newOrderDetail="newOrderDetail"></detail>
          <div slot="footer" class="detail-wrap-bottom">
            <el-button type="text">确认</el-button>
            <el-button type="text">退回</el-button>
          </div>
        </el-dialog>
    </div>
</template>
<script>
    import detail from './detail'
    export default {
        data(){
            return {
               detailVisible: false,
                newOrderDetail: {}
            }
        },
        methods: {
           showDetail(){
               this.newOrderDetail = {id: 8, orderTime: '5月14日 16:00', carType: '豪华型', sname: '深圳福田', dname: '深圳宝安国际机场', fromContact: 'Thomas', fromPhone: '15812345678', remark: '大件行李', reason : '新项目洽谈。有客户同行', vehicleLicense: '粤BRP524', driverName: '林师傅'};
               this.detailVisible= !this.detailVisible;
            }
        },
       components: {
          detail: detail
        }
    }
</script>

子组件：

<template>
  <div class="detail-wrap" :data="newOrderDetail">
    <ul>
      <li><span>用车联系人：</span><div>{{newOrderDetail.fromContact}}</div></li>
      <li><span>联系人电话：</span><div>{{newOrderDetail.fromPhone}}</div></li>
      <li><span>用车时间：</span><div>{{newOrderDetail.orderTime}}</div></li>
      <li><span>上车地点：</span><div>{{newOrderDetail.sname}}</div></li>
      <li><span>下车地点：</span><div>{{newOrderDetail.dname}}</div></li>
      <li><span>车辆类型：</span><div>{{newOrderDetail.carType}}</div></li>
      <li v-show="newOrderDetail.remark!=''"><span>用车说明：</span><div>{{newOrderDetail.remark}}</div></li>
    </ul>
  </div>
</template>
<script>
  export default {
    props: {
      newOrderDetail: {
        type: Object,
        default: null
      }
    },
    data() {
      return {
        loading: false
      }
    }
  }
</script>
<style lang="scss" scoped>
  .detail-wrap ul {
    max-height: 400px;
    overflow: auto;

    li {
      position: relative;
      padding: 8px;
      font-size: 1rem;

      span {
        position: absolute;
        width: 90px;
      }

      & > div {
        margin-left: 90px;
      }
    }
  }
</style>