Formily Vue 中 ref 属性的正确使用方式

Formily 是一个强大的表单解决方案，在 Vue 版本中，开发者有时会遇到 ref 属性无法正常工作的问题。本文将深入分析这个问题并提供解决方案。

问题现象

在 Formily Vue 中使用 JSON Schema 定义表单时，开发者可能会尝试通过 x-component-props={ref:"xxx"} 的方式为组件添加 ref 引用，但发现无法通过 $refs 访问到对应的组件实例。

技术背景

在 Vue 中，ref 是一个特殊属性，用于注册对组件或 DOM 元素的引用。Formily Vue 的实现机制中，组件属性是通过 ReactiveField 组件传递的，默认情况下不会直接将 ref 属性传递给底层组件。

解决方案

Formily Vue 实际上已经支持 ref 属性，但需要使用正确的语法格式：

1. 使用函数形式：

x-component-props={{
  ref: (el) => { this.yourRef = el }
}}

2. 使用带 value 的对象：

x-component-props={{
  ref: { value: 'yourRefName' }
}}

实现原理

Formily Vue 内部通过 ReactiveField 组件处理属性传递。当检测到 ref 属性时，会根据 Vue 的 ref 处理机制进行特殊处理：

• 对于函数形式的 ref，会直接调用该函数并传入组件实例
• 对于对象形式的 ref，会将组件实例赋值给对象的 value 属性

最佳实践

1. 在 JSON Schema 中使用 ref 时，推荐使用函数形式，可以更灵活地处理组件引用
2. 如果需要动态控制 ref，可以使用响应式对象
3. 避免在模板中直接使用字符串形式的 ref，这在 Formily 的响应式上下文中可能无法正常工作

总结

理解 Formily Vue 中 ref 属性的工作机制对于开发复杂表单至关重要。通过正确的 ref 使用方式，开发者可以轻松获取表单组件的实例引用，实现更高级的表单交互和控制逻辑。