FormConsumer
Description
Reactive consumer that listens to Formily form state changes via a scoped slot. Whenever the data accessed inside the slot changes, the slot re-renders.
Refer to Form for the exposed API surface.
Usage
<script setup>
import { createForm } from '@formily/core'
import { Field, FormConsumer, FormProvider } from '@silver-formily/vue'
import { ElInput } from 'element-plus'
const form = createForm()
</script>
<template>
<FormProvider :form="form">
<Field name="input" :component="[ElInput]" />
<FormConsumer>
<template #default="{ form: _form }">
{{ _form.values.input }}
</template>
</FormConsumer>
</FormProvider>
</template><script setup>
import { createForm } from '@formily/core'
import { Field, FormConsumer, FormProvider } from '@silver-formily/vue'
import { ElInput } from 'element-plus'
const form = createForm()
</script>
<template>
<FormProvider :form="form">
<Field name="input" :component="[ElInput]" />
<FormConsumer>
<template #default="{ form: _form }">
{{ _form.values.input }}
</template>
</FormConsumer>
</FormProvider>
</template>
查看源码
API
Slots
| Slot | Description | Type |
|---|---|---|
| default | Scoped slot receiving the current form | object |