父组件和子组件同时展示
父组件：
<div><el-button @click="showdialog">点击</el-button><div><UploadFile ref="child"></UploadFile></div></div>
created () {this.init();
},
methods:{init () {this.$axios({url: `/proxy_version/renew/getList`,method: 'post',data: {pageNo: 1,pageSize: 100},success: (result) => {this.$refs.child.formdata1 = result.data.list[0];this.$refs.child.formdata1.versionType = "1";}});},}
异步任务可以直接实现，父组件通过ref修改子组件的formdata1，因为异步任务返回结果后，会对formdata1进行数据更新，所以组件重新渲染且显示正常。
但是如果是同步代码。则会出现属性undefined，因为此时子组件并没有渲染，还没有formdata1属性。
init () {this.$refs.child.formdata1.versionType = "1";
},
解决方法：
1.使用this.$nextTick
this.$nextTick(() => {this.$refs.child.formdata1 = {versionType: "1",versionNumber: '1.0.0'}})
会在dom更新完后，自动调用回调函数，此时会重新渲染子组件。
2.使用setTimeout
setTimeout(() => {this.$refs.child.formdata1 = {versionType: '1',versionNumber: '1.0.0'}
});
使得代码变成异步的。
调用子组件的函数也是采用上面的方法。
父组件点击展示子组件
和上面的方法相同
解决方案
拓展
当子组件中要改变的变量formdata1是空对象，则在父组件中
this.$refs.child.formdata1.versionNumber = "-1.0.0";
this.$refs.child.formdata1.versionType = "1";
进行上面形式的赋值，并不会触发子组件的重新渲染。
解决办法：
直接生成一个新的对象
this.$refs.child.formdata1 = {versionType: '1',versionNumber: '1.0.0'
}
或者
this.$refs.child.formdata1 = {};
this.$refs.child.formdata1.versionNumber = "-1.0.0";
this.$refs.child.formdata1.versionType = "1";
或者
在子组件中定义好formdata中的属性，并且如何在父组件中更改的不是下面两个属性，则仍然不会触发子组件重新渲染
formdata1: {versionNumber: '2.0.0',versionType: '1'
},
)
