el-dialog中使用el-form子组件传数据问题-Toy模板网

这篇具有很好参考价值的文章主要介绍了el-dialog中使用el-form子组件传数据问题。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

需求：在父组件中点击后显示el-dialog，el-dialog中使用了子组件，并需要向子组件传form数据。

<el-dialog width="50%" title="对象信息" :visible.sync="dialogFormVisible" @close="closedialog">
	<UploadFile ref="child"></UploadFile>
</el-dialog>

方法...
this.dialogFormVisible = true;
this.$refs.child.childFile(obj);
...

如果先传值this.$refs.child.childFile(obj);，再让this.dialogFormVisible = true;，则会出现childFile方法undefined。
但是即使是先this.dialogFormVisible = true;也会是方法undefined。因为
在Vue.js中，视图更新是异步的。当你修改了数据，Vue.js并不会立即更新DOM，而是在下一个事件循环中执行更新。这种异步更新的机制可以提高性能，因为它允许Vue.js在一次事件循环中批量处理多个数据变更。
而this.$refs.child.childFile(obj);是同步代码，视图还没更新时，这行代码已经执行了，所以仍然是方法undefined。
当你设置 this.dialogFormVisible = true; 打开对话框时，对话框组件的DOM可能尚未完全渲染和挂载。因此，如果你尝试立即访问子组件的方法，可能会遇到子组件尚未准备好的问题。

解决方案：

1.使用this.$nextTick

this.dialogFormVisible = true;
this.$nextTick(() => {
  this.$refs.child.childFile(obj);
})

先设置为true，然后再调用子组件的方法。

this.$nextTick：在下次 DOM 更新循环结束之后执行延迟回调。所以就衍生出了这个获取更新后的DOM的Vue方法。所以放在Vue.nextTick()回调函数中的执行的应该是会对DOM进行操作的 js代码；
nextTick()，是将回调函数延迟在下一次dom更新数据后调用，简单的理解是：当数据更新了，在dom中渲染后，自动执行该函数。
vue.nextTick()方法的使用详解（简单明了）

2.使用setTimeout

this.dialogFormVisible = true;
setTimeout(() => {
	this.$refs.child.childFile(obj);
});

调用方法变成了异步代码。

拓展

1.父组件用props把参数（id）传递给子组件使用的，但是props传参是异步的

2.el-dialog 组件会监听 visible 的状态，当状态为 true 时，立刻触发 open 事件，但这个时候 el-dialog__body 的内容还没有渲染。因为 Vue 组件通过 $emit 触发的事件并不是异步执行的，而是同步执行。
Element UI Dialog 组件中执行 DOM 操作异常问题的分析与处理

3.resetFields() 函数重置时，初始化的值是啥就重置成初始的数据。文章来源地址https://www.toymoban.com/news/detail-791674.html

到了这里，关于el-dialog中使用el-form子组件传数据问题的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！