refs传值

最新推荐文章于 2024-04-17 21:53:28 发布

Frilled Lizard

最新推荐文章于 2024-04-17 21:53:28 发布

阅读量444

点赞数 10

文章标签：前端 javascript js 开发语言 vue.js

本文链接：https://blog.csdn.net/zing_ing/article/details/135561123

版权

文章讲述了在Vue应用中，父组件如何通过`ref`异步修改子组件的属性并确保渲染的问题，以及同步情况下可能出现的undefined问题。提供了使用`$nextTick`和`setTimeout`解决同步更新渲染问题的示例，并讨论了特殊情况下如何避免子组件无须重新渲染的情况。

摘要由CSDN通过智能技术生成

父组件和子组件同时展示

父组件：

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