VUE 俩种方式引入子组件方式携带参数打开子页面

第一种方式

1.父组件import方式引入子组件

import resourceDataTable from '@/apps/resourcedirectory/views/resourceDataTable';


methods: {
    searchHtml() {
      this.resourceDataTableFlag=true;
    }
}




<!-- html代码 -->
  <el-dialog
      :visible.sync="resourceDataTableFlag"
      :modal="true"
      title="资源列表"
      append-to-body
      :fullscreen="true"

    >
<!-- :publicityId="formEntity.publicityId" 自定义参数-->
      <resourceDataTable ref="resourceDataTable" :publicityId="formEntity.publicityId"></resourceDataTable>
      <div slot="footer" class="dialog-footer">
        <el-button @click="resourceDataTableFlag=false">返 回</el-button>
      </div>
    </el-dialog>

2.子组件js区域

export default {
 props:{
    publicityId:{ //自定义参数
      type:String, //定义tyle
      required:true,//定义是否必填
      default:undefined //默认值
    }
  },
 name: 'dataFieldTable',
 created(){
    console.log(this.publicityId); //测试参数是否获取到 可以直接做查询
  }

}

 第二种方式就是子页面负责dialog的展示 因为父组件声明了 ref="resourceDataTable"

父组件调用方法 this.$refs.resourceDataTable.open(entity);

  调用当前子组件的open方法 手写一个吧

子组件

methods: {
   open(entity){
      this.reset(); //重置表单
      getListByEntityId(entity).then(res=>{ //请求数据
        console.log(res)
      }).catch(error=>{
        console.log(error)
      })
      this.resourceDataTableFlag=true; //打开子页面dailog
    },
}

<!--html-->
<template>
   <div>
    <!-- 添加或修改政务办数据对接日志对话框 -->
    <el-dialog :title="title" :visible.sync="resourceDataTableFlag" :width="dialogWidth" ref="editDiaLog" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="110px">
        <el-row>
         <el-col :span="12">
            <el-form-item label="更新目标条数" prop="">
              <el-input v-model="form." placeholder="请输入更新目标条数" />
            </el-form-item>
           </el-col>
         <el-col :span="12">
            <el-form-item label="更新成功条数" prop="">
              <el-input v-model="form." placeholder="请输入更新成功条数" />
            </el-form-item>
           </el-col>
        </el-row>
        <el-row>
         <el-col :span="12">
            <el-form-item label="更新失败条数" prop="">
              <el-input v-model="form." placeholder="请输入更新失败条数" />
            </el-form-item>
           </el-col>
         <el-col :span="12">
            <el-form-item label="不符合更新要求条数" prop="">
              <el-input v-model="form." placeholder="请输入不符合更新要求条数" />
            </el-form-item>
           </el-col>
        </el-row>
        <el-row>
         <el-col :span="12">
            <el-form-item label="更新类别,1自动,2手动" prop="">
              <el-select v-model="form." placeholder="请选择更新类别,1自动,2手动">
                <el-option label="请选择字典生成" value="" />
              </el-select>
            </el-form-item>
           </el-col>
         <el-col :span="12">
           </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
    </div>
</template>