vue使用 dialog 弹框传参

父页面

父页面调用的子组件

<worktypeschedule
    ref="personDetail">
</worktypeschedule>

父页面引入子组件

import worktypeschedule from './testschedule0.vue'

父页面定义参数传递类型

detailParams:{}

通过button按钮打开子页面

 showdetail(row) {
      console.log(row);
      // 参数
      this.detailparams = {
       // 这里传递的是表格的两个列参数
        earecode: row.earecode,
        testdate: row.testdate
      }
      // 使用 $refs.personDetail 调用子页面的showDateschedule方法，
      // 并把 detailparams 参数传与子页面
      this.$refs.personDetail.showDateschedule(this.detailparams)
    },

子页面

子页面（）

<el-dialog
    width="45%"
    height=" 360px"
    title="考试日程"
    :visible.sync="detailInnerVisible"
    append-to-body>
    <el-table
          ref="multipleTable"
          :span-method="objectSpanMethod"
          :data="paperlist"
          style="width: 100%; margin-top: 20px"
          :header-cell-style="headClass"
          border
        >
          <el-table-column 
          type="index" 
          width="80" 
          label="序号"
          align="center" 
          >
          </el-table-column>
          <el-table-column
            prop="worktypename"
            label="工种" show-overflow-tooltip
            align="center"
          >
          </el-table-column>
          <el-table-column
            label="级别"  show-overflow-tooltip
            align="center"
          >
            <template slot-scope="scope">
              <span v-if="scope.row.grade == 1">一级</span>
              <span v-if="scope.row.grade == 2">二级</span>
              <span v-if="scope.row.grade == 3">三级</span>
              <span v-if="scope.row.grade == 4">四级</span>
              <span v-if="scope.row.grade == 5">五级</span>
          </template>
          </el-table-column>
          <el-table-column
            prop="percount"
            label="人数" show-overflow-tooltip
            align="center"
          >
          </el-table-column>
        </el-table>
      </el-dialog>

使用props，接收父页面传递的参数

 props: { detailParams: Object },

绑定的 data 数据

detailInnerVisible:false,
canshu:{},

父页面传递的参数接收

// 父页面传递参数接收
    showDateschedule(detailParams) {
      console.log(detailParams);
      this.detailInnerVisible = true
      this.canshu = detailParams
      console.log(this.canshu);
    },