useFieldSchema
描述
主要在自定义组件中读取当前字段的 Schema 信息，该 hook 只能用在 SchemaField 或者 RecursionField 的子树中使用
Schema 协议说明
本页只说明 @silver-formily/vue 中如何读取当前字段的 Schema。Schema、ISchema 和各类协议字段的完整文档请查看 JSON Schema 重建文档站。当前站内的桥接入口见 Schema。
签名
ts
interface useFieldSchema {
(): Ref<Schema>
}Schema 类型桥接说明见 Schema，完整 API 请查看 JSON Schema 重建文档站。
用例
<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>
查看源码