Vue3 + Element Plus 自定义表单组件

在 Vue 3 中自定义 Element Plus 表单组件的基本步骤如下：

1. 自定义组件需要支持v-model，在组件内部定义一个modelValueprop和一个update:modelValue事件

<template>
  <el-input v-model="inputValue" @input="handleInput" placeholder="请输入内容"></el-input>
</template>

<script setup>
import { ref, defineEmits } from 'vue';

const props = defineProps({
  modelValue: {
    type: String,
    required: true
  }
});

const emit = defineEmits(['update:modelValue']);

const inputValue = ref(props.modelValue);

const handleInput = (value) => {
  emit('update:modelValue', value);
};
</script>

2. 在自定义组件中能够触发 Element Plus 的表单验证

不推荐

<script setup>
import { getCurrentInstance } from 'vue';

const instance = getCurrentInstance().proxy;

const handleInput = (value) => {
  emit('update:modelValue', value);
  instance.$parent?.validate?.((valid) => console.log(valid));
};
</script>

推荐

<script setup>
import { useFormItem } from 'element-plus';

const { formItem } = useFormItem();

const handleInput = (value) => {
  emit('update:modelValue', value);
  formItem?.validate('change', (valid) => console.log(valid));
};
</script>