首页 > 其他分享 >子组件向父组件传参后,父组件再次调用子组件方法,子组件中upload为undefined

子组件向父组件传参后,父组件再次调用子组件方法,子组件中upload为undefined

时间:2023-02-02 20:13:34浏览次数:35  
标签:undefined form 向父 default upload file 组件 change

需求:代码更改后有几个受影响对象,flag为是则弹出具体信息框,若为否则关闭,并清除信息框信息,信息框中内容还涉及上传文件。

实现:由于多个对象涉及复用,则使用父组件调用子组件的方式实现。

父组件:

使用v-model双向绑定数据

<template>
  <div>
    <affect-item v-model="mydata1" item-name="object1" ref="object1"></affet-item>     <affect-item v-model="mydata2" item-name="object2"></affet-item>   </div> </template>

<script>
import {default as AffetItem} from "./affetItem";

export default {
  name:"Father",
  components:{AffectItem},

  methods:{
    handle(){
      //功能代码
      this.$refs.object1.uploadSubmit(param);//可以传参数,调用此方法会报错:upload为undefined
    }
  }
}
</script>

子组件:

<template>
  <div>
    <el-form :model="form>
      <div>
        <el-radio v-model="form.flag" @input="change" :label=true>是</el-radio>
        <el-radio v-model="form.flag" @input="change" :label=false>否</el-radio>
      </div>

      <div>
        <el-form-item label="影响内容" prop="content">
          <el-input v-model="form.content></el-input>
        </el-form-item>
        <el-form-item label="影响文件" prop-"file">
          <el-upload :action="uploadUrl" :data="data" :on-change="handleChange" :auto-upload="false" ref="upload">
            <el-button slot="trigger" id="selectFile">
              <i class="el-icon-circle-plus"/>
            </el-button>
          </el-upload>
        </el-form-item>
      </div>
    </el-form>
  </div>
</template>

<script>

export default{
  name:"affetItem",
  model:{
    prop:"form",
    event:"change"
  },
  props:{
    itemName:{
      type:String,
      default:""
    },
    form:{
      type:Object,
      default:function(){
        return{}
      }
    }
  },

  methods:{
    change(val){
      //强制刷新
      this.$forceUpdate();
      if(!val){
        this.$emit("change",{flag:false})
      }
    },

    handleChange(file,fileList){
      if(file.status === "ready"){
        this.$emit("change",this.form);
      }
    },

    uploadSubmit(info){
      this.$refs.upload.submit();
    }
  }
}

</script>

 解决:不适用model的change方式传回参数,使用返回方法

父组件更改:

<affet-item item-name="object1" ref="object1" @custClick="custMethod"/>

//新增方法手动绑定数据
custMethod(value){ //value来自子组件传参
  this.form.object = value;
}

子组件更改:

handleChange(file,fileList){
      if(file.status === "ready"){
        this.$emit("custClick",this.form);
      }
    },

 

标签:undefined,form,向父,default,upload,file,组件,change
From: https://www.cnblogs.com/menoyahu/p/17086547.html

相关文章