如何在 Element Plus 的表单 el-form 组件中使用自定义组件

[!quote]

参考：VUE3基于element-plus二次开发的表单内容组件或者自定义的表单内容组件无法自动触发表单校验问题

示例

<script lang="ts" setup>
import { useFormItem } from "element-plus";

defineProps<{
  modelValue: string;
}>();

const { formItem } = useFormItem();

const emit = defineEmits<{
  (e: "update:modelValue", val: string): void;
}>();

function onChange(val: Event) {
  const inputEle: HTMLInputElement = val.target as HTMLInputElement;
  emit("update:modelValue", inputEle.value);
  formItem?.validate?.("change");
}

function onBlur() {
  formItem?.validate?.("blur");
}
</script>

<template>
  <input @change="onChange" @blur="onBlur" type="text" :value="modelValue" />
</template>

<style lang="scss" scoped></style>