useFieldSchema
Description
Read the schema associated with the current field. Works inside SchemaField or RecursionField subtrees.
Schema Protocol
This page only covers how @silver-formily/vue reads the current field schema. For the full Schema, ISchema, and protocol field reference, see the rebuilt JSON Schema docs. The local bridge page remains available at Schema.
Signature
ts
interface useFieldSchema {
(): Ref<Schema>
}See Schema for the local bridge page, or go straight to the rebuilt JSON Schema docs for the full API.
Example
<script setup lang="ts">
import { createForm } from '@formily/core'
import { createSchemaField, FormProvider, useFieldSchema } from '@silver-formily/vue'
import { defineComponent, h } from 'vue'
const Custom = defineComponent({
setup() {
const schemaRef = useFieldSchema()
return () => {
const schema = schemaRef.value
return h(
'div',
{
style: { whiteSpace: 'pre' },
},
[JSON.stringify(schema.toJSON(), null, 4)],
)
}
},
})
const { SchemaField, SchemaObjectField } = createSchemaField({
components: {
Custom,
},
})
const form = createForm({ validateFirst: true })
</script>
<template>
<FormProvider :form="form">
<SchemaField>
<SchemaObjectField
name="custom"
x-component="Custom"
:x-component-props="{
schema: {
type: 'object',
properties: {
input: {
'type': 'string',
'x-component': 'Custom',
},
},
},
}"
/>
</SchemaField>
</FormProvider>
</template>{
"_isJSONSchemaObject": true,
"name": "custom",
"x-component": "Custom",
"x-component-props": {
"schema": {
"type": "object",
"properties": {
"input": {
"type": "string",
"x-component": "Custom"
}
}
}
},
"type": "object"
}
<script setup lang="ts">
import { createForm } from '@formily/core'
import { createSchemaField, FormProvider, useFieldSchema } from '@silver-formily/vue'
import { defineComponent, h } from 'vue'
const Custom = defineComponent({
setup() {
const schemaRef = useFieldSchema()
return () => {
const schema = schemaRef.value
return h(
'div',
{
style: { whiteSpace: 'pre' },
},
[JSON.stringify(schema.toJSON(), null, 4)],
)
}
},
})
const { SchemaField, SchemaObjectField } = createSchemaField({
components: {
Custom,
},
})
const form = createForm({ validateFirst: true })
</script>
<template>
<FormProvider :form="form">
<SchemaField>
<SchemaObjectField
name="custom"
x-component="Custom"
:x-component-props="{
schema: {
type: 'object',
properties: {
input: {
'type': 'string',
'x-component': 'Custom',
},
},
},
}"
/>
</SchemaField>
</FormProvider>
</template>
查看源码