Vant4 中组合式API：useCustomFieldValue 的使用（Vant4中，如何获取自定义表单项的值？）

目录

一、介绍

二、基本用法

三、示例

1、自定义组件

2、表单

四、总结

---

一、介绍

useCustomFieldValue是一个钩子函数，用于自定义 van-form 组件中的表单项，返回自定义表单项的值。

二、基本用法

如果要自定义表单项，可以在van-field组件的 input 插槽中插入自定义组件，并且在自定义组件内部调用useCustomFieldValue 方法，否则表单提交的时候，不能获取到自定义表单项的值。

三、示例

1、自定义组件

在自定义的组件内，将需要暴露给表单的值，用useCustomFieldValue 返回。

//myComponent.vue
<template>
    <van-cell-group inset>
      <van-field
        v-model="value1"
        label="文本"
        placeholder="显示图标"
      />
      <van-field
        v-model="value2"
        clearable
        label="文本"
      />
    </van-cell-group>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { useCustomFieldValue } from '@vant/use';

const value1 = ref('');
const value2 = ref('');
useCustomFieldValue(() => {
  return {
    value1: value1.value,
    value2: value2.value
  };
}
</script>

2、表单

在van-form的表单中嵌入你的自定义组件，在提交表单的时候，就可以获取自定义组件中，通过useCustomFieldValue暴露出来的表单项的值。

<template>
    <van-form ref="formRef" @submit="onSubmit">
        <van-field name="filed1" label="自定义表单项">
          <template  #input>
              <my-component />
          </template>
        </van-field>
    </van-form>
</template>
<script lang="ts" setup>
import { FormInstance } from "vant"
import MyComponent from "./myComponent.vue"

const formRef = ref<FormInstance>();

const onSubmit = (values: any) => {
    const valuesObj = Object.values(values);
    console.log(valuesObj); // {value1: '', value2: ''}
}
</script>

四、总结

注意，useCustomFieldValue只能在setup函数中使用，因为它是一个钩子函数。在组件中，可以通过customFieldValue变量来获取自定义字段的值。