props传值问题

父组件和子组件同时展现

同步任务无需添加额外的代码,正常写,而异步任务需要添加下面的解决方案,因为异步任务需要等待响应才能进行赋值。

父组件:

html 复制代码
<div>
	<UploadFile ref="child" :data="tableData"></UploadFile>
</div>
javascript 复制代码
created () {
  this.init();
},
methods: {
  showdialog () {
    this.dialogFormVisible = true;
  },
  init () {
    this.$axios({
      url: `/proxy_version/renew/getList`,
      method: 'post',
      data: {
        pageNo: 1,
        pageSize: 100
      },
      success: (result) => {
        this.tableData = result.data.list[0];
        this.tableData.versionType = "1";
        console.log("this.tableData", this.tableData);
      }
    });
  },
}

通过props父组件在created函数中初始化子组件的数据

子组件:

javascript 复制代码
 props: ['data'],
 data () {
   return {
     formdata: this.data,
     versionNum: this.data.versionNumber,
   }
 },
 // 或者
created () {
	this.formdata = this.data;
	this.versionNum = this.data.versionNumber;
	console.log("data", this.data);
},

子组件在created中进行接收或者在data中进行更改,created和data都是页面在渲染时才会调用,后面就不会再去调用created和data中进行赋值。

按上面的方法会出现versionNumber等属性undefined,这是因为在父组件调用接口传递数据给子组件时,接口响应显然是异步的。这会导致无论你在父组件哪个钩子发请求,在子组件哪个钩子接收数据,都是取不到的。

解决方法:

1.加上一个v-if进行判断

javascript 复制代码
<div>
	<UploadFile ref="child" :data="tableData" v-if="tableData"></UploadFile>
</div>

tableData要设置为null或者undefined,或者v-if更改条件,设置为null或defined,则在赋值时不可以this.tableData.versionType = "1";否则报错。在渲染子组件的时候加上一个条件,当有数据的时候在去渲染子组件。这样就会形成天然的阻塞。在父组件的created中的请求返回数据后,才会执行子组件的created,mounted。最后执行父组件的mounted。

2.使用watch进行监听

javascript 复制代码
watch: {
   data: {
     deep: true,
     handler: function (newVal, oldVal) {
       this.$nextTick(() => {
         this.formdata = newVal
         this.versionNum = newVal.versionNumber;
       })
     }
   }
 },

在子组件中添加watch监听, 父组件获取到值得时候, 就会触发watch监听, 从而实现重新渲染子组件。

父组件点击之后显示子组件

props:

同步任务:

父组件:

html 复制代码
<div>
    <el-button @click="showdialog">点击</el-button>
    <div>
      <el-dialog width="50%" title="对象信息" :visible.sync="dialogFormVisible">
        <UploadFile ref="child" :data="tableData"></UploadFile>
      </el-dialog>
    </div>
  </div>
javascript 复制代码
 showdialog () {
      this.dialogFormVisible = true;
      this.tableData.versionType = "1";
      this.tableData.versionNumber = '1.0.0';
      console.log(this.tableData);
    },

子组件:

javascript 复制代码
 props: ['data'],
  data () {
    return {
      formdata: this.data,
      versionNum: this.data.versionNumber,
    }
  },
  //或者
created () {
	this.formdata = this.data;
	this.versionNum = this.data.versionNumber;
},

点击事件中为同步代码则没有任何问题,可以显示数据。

异步任务

但如果是异步任务,则无法显示数据,因为异步任务返回结果时,子组件的created和data都已经初始化完成。

解决方案1:

父组件:

html 复制代码
<div>
    <el-button @click="showdialog">点击</el-button>
    <div>
      <el-dialog width="50%" title="对象信息" :visible.sync="dialogFormVisible">
        <UploadFile ref="child" :data="tableData"></UploadFile>
      </el-dialog>
    </div>
  </div>
javascript 复制代码
showdialog () {
	this.dialogFormVisible = true;
	this.$axios({
		url: `/proxy_version/renew/getList`,
		method: 'post',
		data: {
			pageNo: 1,
			pageSize: 100
		},
		success: (result) => {
			this.tableData = result.data.list[0];
			this.tableData.versionType = "1";
			console.log("this.tableData", this.tableData);
	}
});

子组件:

javascript 复制代码
props: ['data'],
 data () {
   return {
     formdata: {},
     versionNum: null,
   }
 },
 
watch: {
    data: {
      deep: true,
      handler: function (newVal, oldVal) {
        this.$nextTick(() => {
          this.formdata = newVal
          this.versionNum = newVal.versionNumber;
          console.log(this.formdata);
        })
      }
    }
  },

在子组件加入watch函数进行监测。

解决方案2:

父组件:

html 复制代码
  <div>
    <el-button @click="showdialog">点击</el-button>
    <div>
      <el-dialog width="50%" title="对象信息" :visible.sync="dialogFormVisible">
        <UploadFile ref="child" :data="tableData" v-if="tableData"></UploadFile>
      </el-dialog>
    </div>
  </div>
 //  父组件点击方法不变,正常写

加上v-if进行判断tableData有没有值,有才渲染子组件

子组件可以在created函数中进行赋值也可以在data中进行赋值。

相关推荐
nlog3n10 分钟前
Java外观模式详解
java·开发语言·外观模式
方瑾瑜19 分钟前
Visual Basic语言的物联网
开发语言·后端·golang
HelloRevit32 分钟前
React DndKit 实现类似slack 类别、频道拖动调整位置功能
前端·javascript·react.js
无名之逆1 小时前
[特殊字符] Hyperlane 框架:高性能、灵活、易用的 Rust 微服务解决方案
运维·服务器·开发语言·数据库·后端·微服务·rust
Vitalia1 小时前
⭐算法OJ⭐寻找最短超串【动态规划 + 状态压缩】(C++ 实现)Find the Shortest Superstring
开发语言·c++·算法·动态规划·动态压缩
ohMyGod_1231 小时前
用React实现一个秒杀倒计时组件
前端·javascript·react.js
eternal__day1 小时前
第三期:深入理解 Spring Web MVC [特殊字符](数据传参+ 特殊字符处理 + 编码问题解析)
java·前端·spring·java-ee·mvc
最后一个bug1 小时前
PCI与PCIe接口的通信架构是主从模式吗?
linux·开发语言·arm开发·stm32·嵌入式硬件
落落鱼20131 小时前
TP6图片操作 Image::open 调用->save()方法时候报错Type is not supported
开发语言
醋醋1 小时前
Vue2源码记录
前端·vue.js