element--Diaolog弹窗打开之后渲染组件方式

// initForm： 子组件方法
// this.dialog.data.id: 子组件的请求接口的参数
this.$refs.dialog.initForm(this.dialog.data.id)

<el-button @click="edit(id)">修改</el-button>
<el-button @click="add">新增</el-button>
<el-dialog
  :title="dialog.title"
  :visible.sync="dialog.visible"
  :width="dialog.width"
  center
  @opened="initForm"> <!-- element自带的弹窗打开回调函数 -->
  <component :is="dialog.name" ref="dialog"></component><!-- 动态组件:子组件 -->
</el-dialog>
 
<script>
import { Add, Edit } from './Dialog'
export default {
  components: {
    Add,
    Edit
  },
  data () {
    return {
      dialog: { // 弹窗组件传递数据
        title: '',
        visible: false,
        width: '',
        name: '' // 组件名
      }
    }
  },
  methods: {
    // 新增链接配置信息
    add () {
      this.dialog = {
        visible: true,
        title: '新增连接配置信息',
        width: '1000px',
        name: 'add-config'
      }
    },
    // 编辑修改设备信息
    edit (id) {
      this.dialog = {
        visible: true,
        title: '修改连接配置信息',
        width: '1000px',
        name: 'edit-config',
        data: id
      }
    },
    // 弹窗打开回调（更新数据）
    initForm () {
      switch (this.dialog.name) {
        case 'add':
          this.$refs.dialog.initForm()
          break
        case 'edit':
          this.$refs.dialog.initForm(this.dialog.data.id)
          break
        default:
          break
      }
    }
  }
}
</script>

<Drawer :isShowDrawer.sync = "isShowDrawer" @closeDrawer="isShowDrawer = $event"></Drawer>

 <el-drawer :visible.sync="isShow" direction="rtl" ref="drawerExam"></el-drawer>
 
 
...
 
    props: {
 
       isShowDrawer: {
          type: Boolean,
          default: false
       },
 
    },
 
    computed: {
        isShow: {
            set(val) {
                this.$emit('closeDrawer', val);
            },
            get() {
                return this.isShowDrawer;
            }
        },
    },
 
 

{
    position: relative;
    overflow: hidden;
}

<div class="drawerExam-container"> 
    <el-drawer :visible.sync="isShow" direction="rtl" ref="drawerExam" @open="openDrawer()"></el-drawer>
</div>
 
...
 
 
.drawerExam-container {
    ::v-deep .v-modal {
        position: absolute;
    }
}

 <el-drawer :visible.sync="isShow" direction="rtl" ref="drawerExam" @open="openDrawer()">
    <Checkbox :dataList="easy" @chooseEasy="updateForm" ref="easyRef"></Checkbox>
</el-drawer>

el-drawer的open回调函数：
...
        openDrawer() {
            this.$nextTick(() => {
                setTimeout(() => {
                    this.$refs.easyRef.UpdateList(this.easy);
                }, 0)
            })
 
        },
 
 
 
Checkbox组件：
...
        UpdateList(arr) {
            this.newDataList = arr;
            // 置空该组件原有的值
            this.checkboxGroup = [];
            this.chooseEasy();
        },
 
        // 多选选中后给父组件传值
        chooseEasy() {
            this.$emit('chooseEasy', this.checkboxGroup);
        },