访问另一个组件中的函数\ $ refs与当前组件不在同一级别

问题描述

我有一个Vue 2应用程序，其中嵌套了不同的组件。 它们的结构有点（我跳过了无关的问题）：

<root>
 <app>
 <component1/>
 ...
 <component3>
  <billingAddress>
   <customForm/>
  </billingAddress>
  <shippingAddress>
   <customForm/>
  </shippingAddress>
 </component3>
 ...
 <lastComponent/>
 </app>
</root>

customForm1和2包含通过vee-validate验证的表单-因此存在ValidationObserver组件。

在相对提交时验证了这两种形式-提交操作是自定义的，成功验证它们后，它们将被隐藏-并且没有重定向。

在“ lastComponent”上，有一个“提交”按钮，直到正确提交了两种表格并执行其他逻辑后，该按钮才被禁用。

今天，我被要求更改该按钮的行为：现在它可能会启动这两个表单的验证和提交，因此跳过了用户的“手动”提交。

我不确定如何处理此问题，因为ValidationObserver和自定义操作位于与“ lastComponent”无关的组件中。

到目前为止，我已经设法从$ root开始遍历$ refs树，但是我真的不喜欢这种脆弱的方法。

这是我在“提交”操作中正在做的事情：

let shippingAddressValid = await this.$root.$children[0].$refs.addresses.$refs.shippingAddress.$refs.addressForm.$refs.shippingAddressForm.validate();
  if (shippingAddressValid) {
          await this.$root.$children[0].$refs.addresses.$refs.shippingAddress.$refs.addressForm.updateAddress();
  }

我想知道是否有更好的方法。

我很有趣found this anweser。但是，我还没有找到一种通过“全局总线”设置自定义事件的方法，该方法可以异步地返回一个值。 我的意思是，在调用Submit方法之前，获取表单的“有效”状态是强制性的。 我不能只在方法中调用验证，因为如果表单无效，我必须做一些逻辑。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）