给vue父子页面传值的两种方式(含代码)

一只小鸟儿

已于 2022-11-16 14:11:02 修改

阅读量1.4k

点赞数

分类专栏： vue 文章标签： vue.js elementui javascript

于 2022-08-11 14:40:38 首次发布

本文链接：https://blog.csdn.net/theshy08/article/details/126285036

版权

vue 专栏收录该内容

4 篇文章 11 订阅

订阅专栏

推荐使用方法二

方法一:

父 :

   <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>

    <!--  拒绝认领  -->
    <refuse-claim-index ref="refuseClaimIndex" v-show="showRefuseClaimIndex" :reasonId="reasonId" :types="typs"/>
    <!--  确认认领  -->
    <confirm-claim ref="confirmClaim" v-show="showConfirmClaim" :confirmId="confirmId"></confirm-claim>
  </div>
</template>

//拒绝认领
refuseClaim(row) {
  this.reasonId = row.id
  this.typs = row.type;
  this.showRefuseClaimIndex = true
  if (this.showRefuseClaimIndex) {
    setTimeout(() => {
      this.$refs.refuseClaimIndex.openDialog(row.type)
    }, 300)
  }
},

子:

<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="250px" class="demo-ruleForm">
  <el-form-item label="原因" prop="reason">
    <el-input style="width: 85%" type="textarea" :autosize="{ minRows: 3}" v-model="ruleForm.reason"></el-input>
  </el-form-item>
  <el-form-item label="电流" prop="zglszllnum"  v-if="dlPd">
    <el-input style="width: 85%" type="number" :autosize="{ minRows: 3}"

              v-model="ruleForm.zglszllnum" ></el-input>

  </el-form-item>

  <el-form-item label="有功" prop="zglszllnum"   v-if="ygPd">
    <el-input style="width: 85%" type="number" :autosize="{ minRows: 3}"

              v-model="ruleForm.zglszllnum" ></el-input>

  </el-form-item>
</el-form>

props: {
  reasonId: '',
  types: null
},
data() {
  return {
    dialogVisible: false,
    dlPd:false,
    ygPd:false,
    ruleForm: {
      reason: '',
      zglszllnum: 0,
    },
    id: '',
    rules: {
      reason: [
        {required: true, message: '请填写原因', trigger: 'blur'}
      ],
      zglszllnum: [
        {required: true, message: '请填写实际载流量/功率', trigger: 'blur'}
      ]
    }
  };
},

changeType(){
  //判断电流还是
    if (this.types ==0){
      //显示电流
      this.dlPd = true
      this.ygPd = false
    }else if (this.types ==1){
      //显示有功
      this.dlPd = false
      this.ygPd = true
    }
},
openDialog(data) {
  alert(data)
  this.dialogVisible = true;
  this.changeType();
},

方法二:

父

<el-table-column label="操作" align="center" min-width="20%" class-name="small-padding fixed-width">
  <template slot-scope="scope">
    <el-button v-if="scope.row.claim === 0"
               size="mini"
               icon="el-icon-success"
               @click="confirmClaim(scope.row)"
               type="text">
      确认认领
    </el-button>
    <el-button v-if="scope.row.claim === 0"
               size="mini"
               icon="el-icon-circle-close"
               @click="refuseClaim(scope.row)"
               type="text">
      拒绝认领
    </el-button>
    <el-button v-if="scope.row.claim === 2"
               size="mini"
               type="text">
      已拒绝认领
    </el-button>
    <el-button v-if="scope.row.claim === 1"
               size="mini"
               type="text"
               icon="el-icon-edit"
               @click="handleUpdate(scope.row)"

    >发布
    </el-button>

  </template>
</el-table-column>

//拒绝认领
refuseClaim(row) {
  this.reasonId = row.id
  this.formLabel = row.type==0?'实际电流':'实际功率'
  this.showRefuseClaimIndex = true
  if (this.showRefuseClaimIndex) {
    setTimeout(() => {
      this.$refs.refuseClaimIndex.openDialog()
    }, 300)
  }
},

引入一下子页面

import refuseClaimIndex from "./components/refuseClaimIndex";

子:

methods: { openDialog() { this.dialogVisible = true; },

<template>
  <div class="refuseClaimIndex">
    <el-dialog
      title="拒绝认领原因填写"
      :visible.sync="dialogVisible"
      width="43%"
      :before-close="handleClose">
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="250px" class="demo-ruleForm">
        <el-form-item label="原因" prop="reason">
          <el-input style="width: 85%" type="textarea" :autosize="{ minRows: 3}" v-model="ruleForm.reason"></el-input>
        </el-form-item>
        <el-form-item :label="formLabel" prop="zglszllnum">
          <el-input style="width: 85%" type="number" :autosize="{ minRows: 3}" v-model="ruleForm.zglszllnum"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
          <el-button type="primary" @click="submitForm('ruleForm')">确认</el-button>
          <el-button @click="resetForm('ruleForm')">取消</el-button>
      </span>
    </el-dialog>
  </div>
</template>

这里讲解一下

主要就是用了 .$refs 然后父页面引用一下;父页面定义一个需要传的元素并赋值;用$refs调用子页面的xxx方法,子页面控制 dialog 的显示隐藏;子页面可以获取到父页面的值