主要在自定义组件中读取当前Form实例,用于实现一些副作用依赖,比如依赖 Form 的 errors 信息之类的,用于实现一些较为复杂的场景化组件
interface useForm {
(): Form
}<script setup lang="tsx">
import { createForm } from '@formily/core'
import { observer } from '@formily/reactive-vue'
import { Field, FormProvider, useForm } from '@silver-formily/vue'
import { ElInput, ElSpace } from 'element-plus'
import { defineComponent } from 'vue'
const Custom = observer(
defineComponent({
name: 'Custom',
setup() {
const formRef = useForm()
return () => (
<div>
{formRef.value?.values.input}
</div>
)
},
}),
)
const form = createForm({ validateFirst: true })
</script>
<template>
<FormProvider :form="form">
<ElSpace>
<Field name="input" :component="[ElInput]" />
<Field name="custom" :component="[Custom]" />
</ElSpace>
</FormProvider>
</template>