refs传值

父组件和子组件同时展示

父组件：

 <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'
},