组件介绍

v-formly-v3 中的内置组件封装的是 AntDv 的表单组件，这样就带来一个问题，一些类型为slot的属性我们无法透传，比如Input 输入框的addonBefore属性，它即可以直接传字符串，这个没问题，但是slot我们没法传进去，因为我们对a-input做了封装，在使用 v-formly-v3 的时候我们无法直接接触a-input组件，所以这里我让模板<template>xxx</template>一级一级的从父组件传递到子组件，再传递到孙子组件，直到传递到 AntDv 原生组件为止。下面我们举例说明一下：

<template>
  <div>
    <v-formly-v3 ref="form" v-model="formData" :meta="meta">
      <!-- string1 -->
      <template v-slot:string1_prefix>
        <user-outlined />
      </template>
      <template v-slot:string1_1_suffix>
        <a-tooltip title="Extra information">
          <info-circle-outlined />
        </a-tooltip>
      </template>
    </v-formly-v3>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import type VFormly from "@/ant-design-vue/AFormly.vue";

const form = ref<null | InstanceType<typeof VFormly>>(null);
const meta = {
  type: "object",
  properties: {
    string1: {
      title: "用户名",
      type: "string",
      ui: {
        placeholder: "请输入用户名",
        slotNameOfPrefix: "string1_prefix",
        slotNameOfSuffix: "string1_1_suffix",
      },
    },
  },
};
let formData: any = ref({});
</script>

<style scoped></style>

复制

从上面的代码中，我们可以看到，我们这里的前缀使用了slot来传值，我们只需要在meta里面定义slotNameOfPrefix来标明它的slot name，然后在v-formly-v3模板标签里面定义我们需要传递的模板内容，从而让表单知道我需要把这个slot模板传递到 AntDv 的输入框，这样就达到了slot的传递。

提示

v-formly-v3 的每个表单项的属性中如果有需要传递slot的，必须保证slot name的唯一（比如这里的slotNameOfPrefix和slotNameOfSuffix的值必须不一样），否则无法识别或者识别错误。

# 组件介绍

# 内置组件属性

# 内置组件与 AntDv 组件一一对应关系

# 关于slot的传递

组件介绍

内置组件属性

内置组件与 AntDv 组件一一对应关系

关于`slot`的传递