父组件和子组件同时展现
同步任务无需添加额外的代码,正常写,而异步任务需要添加下面的解决方案,因为异步任务需要等待响应才能进行赋值。
父组件:
<div><UploadFile ref="child" :data="tableData"></UploadFile>
</div>
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函数中初始化子组件的数据
子组件:
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中进行更改。
按上面的方法会出现versionNumber等属性undefined,这是因为在父组件调用接口传递数据给子组件时,接口响应显然是异步的。这会导致无论你在父组件哪个钩子发请求,在子组件哪个钩子接收数据,都是取不到的。
解决方法:
1.加上一个v-if进行判断
<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进行监听
watch: {data: {deep: true,handler: function (newVal, oldVal) {this.$nextTick(() => {this.formdata = newValthis.versionNum = newVal.versionNumber;})}}},
在子组件中添加watch监听, 父组件获取到值得时候, 就会触发watch监听, 从而实现重新渲染子组件。
父组件点击之后显示子组件
props:
同步任务:
父组件:
<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>
showdialog () {this.dialogFormVisible = true;this.tableData.versionType = "1";this.tableData.versionNumber = '1.0.0';console.log(this.tableData);},
子组件:
props: ['data'],data () {return {formdata: this.data,versionNum: this.data.versionNumber,}},//或者
created () {this.formdata = this.data;this.versionNum = this.data.versionNumber;
},
点击事件中为同步代码则没有任何问题,可以显示数据。
异步任务
但如果是异步任务,则无法显示数据,因为异步任务返回结果时,子组件的created和data都已经初始化完成。
解决方案1:
父组件:
<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>
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);}
});
子组件:
props: ['data'],data () {return {formdata: {},versionNum: null,}},watch: {data: {deep: true,handler: function (newVal, oldVal) {this.$nextTick(() => {this.formdata = newValthis.versionNum = newVal.versionNumber;console.log(this.formdata);})}}},
在子组件加入watch函数进行监测。
解决方案2:
父组件:
<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中进行赋值。