[JavaScript知识库]vue父页面跳转子页面，值传递

    <!--  导入弹框 -->
    <debugger-dialog
      ref="ProcDebuggerDialog"
      :visible.sync="debuggerVisible"
      @success="getList"
    />

  components: {
    'debugger-dialog': () => import('./procDebuggerDialog')
  },

data() {
    return {
      debuggerVisible: false,
    }
  },

<el-button type="success" @click="procDebugger">接口调试</el-button>

 procDebugger(){
      debugger
      this.debuggerVisible = true
      //const { itemId } = 1
      const data = {
        procNameId: this.procNameId,
        infCnName: this.infCnName,
        subCode: this.subCode,
        //subUsercode: this.subUsercode
      }
      this.$refs['ProcDebuggerDialog'].open({
        data
      })
/*      let data = {
        procNameId: this.procNameId,
        subCode: this.subCode,
        subUsercode: this.subUsercode
      }
      procDebugger(data).then(res => {
        this.tenditmList = res.data
      })*/
    }

<template>
  <elian-dialog
    ref="ProcDebuggerDialog"
    v-bind="$attrs"
    title="接口调试"
    width="70%"
    height="50vh"
    append-to-body
    v-on="$listeners"
    @close="beforeClosed"
  >
    <div>
      <el-row :gutter="30">
        <el-col :span="12">
          <div class="elian-title">
            <i></i>
            <div>输入参数</div>
          </div>
          <el-form ref="form" label-width="80px">
            <el-form-item label="接口名称：">
              <el-input v-model="form.infCnName"></el-input>
            </el-form-item>
            <el-form-item label="应用平台：">
              <el-input v-model="form.subCode"></el-input>
            </el-form-item>
<!--            <el-form-item label="平台用户(sub_usercode=):">
              <el-input v-model="form.name"></el-input>
            </el-form-item>-->
          </el-form>
          <el-button type="primary" @click="procDebugger" plain>测试接口</el-button>
        </el-col>
        <el-col :span="12">
          <div class="elian-title">
            <i></i>
            <div>数据结果</div>
          </div>
          <el-form ref="form" label-width="80px" label-position="top">
            <el-form-item label="接口URL：">
              <el-input v-model="url" type="textarea" :autosize="{minRows:4,maxRows:15}"></el-input>
            </el-form-item>
            <el-form-item label="接口数据结果：">
              <el-input v-model="result" type="textarea" :autosize="{minRows:4,maxRows:15}"></el-input>
            </el-form-item>
<!--            <el-form-item label="返回数据">
              <el-input v-model="form.name" type="textarea" :autosize="{minRows:4}"></el-input>
            </el-form-item>-->
          </el-form>
        </el-col>
      </el-row>
    </div>
  </elian-dialog>
</template>

<script>
  import { procDebugger } from '@/api/trade/tradeinterface/procNameBd' //列表接口引入

  export default {
    data() {
      return {
        form: {
          procNameId: '',
          subCode: '',
          infCnName: ''
        },
        url: '',
        result: ''
      };
    },
    methods: {
      open(data) {
        this.form.procNameId = data.data.procNameId
        this.form.subCode = data.data.subCode
        this.form.infCnName = data.data.infCnName
      },
      /**
       * 关闭 - 当前弹窗，并刷新父页面
       */
      beforeClosed() {
      },
      procDebugger(){
        let data = {
          procNameId: this.form.procNameId,
          subCode: this.form.subCode,
          //subUsercode: this.form.subUsercode
        }
        procDebugger(data).then(res => {
          //this.tenditmList = res.data
          debugger
          this.url = res.data
          this.result = res.data
        })
      }
    }
  };
</script>

<style  scoped>
  ::v-deep .el-form--label-top .el-form-item__label{
    float:left
  }
  /* //文本域及输入框字体不同,解决 */
  ::v-deep .el-textarea__inner {
    font-family: "微软雅黑";
  }
  ::v-deep .el-input--small .el-input__inner {
    font-family: "微软雅黑";
  }
</style>

开发者涨薪指南

48位大咖的思考法则、工作方式、逻辑体系