<template>
    <el-form
        :model="form"
        ref="formRef"
        label-width="100px"
        :rules="rules"
    >
        <el-form-item
            label="姓名"
            prop="firstName"
        >
            <el-input
                v-model="form.firstName"
                placeholder="请输入姓名"
            ></el-input>
        </el-form-item>
        <el-form-item
            label="名称"
            prop="lastName"
        >
            <el-input
                v-model="form.lastName"
                placeholder="请输入名称"
            ></el-input>
        </el-form-item>
        <el-form-item
            label="生日"
            prop="birthday"
        >
            <el-input
                v-model="form.birthday"
                placeholder="请输入生日"
            ></el-input>
        </el-form-item>
        <el-form-item
            label="邮箱"
            prop="email"
        >
            <el-input
                v-model="form.email"
                placeholder="请输入邮箱"
            ></el-input>
        </el-form-item>
        <el-form-item
            label="性别"
            praceholder="请选择性别"
            prop="sex"
        >
            <el-select
                v-model="form.sex"
                style="width: 100%"
            >
                <el-option
                    label="男"
                    value="male"
                ></el-option>
                <el-option
                    label="女"
                    value="female"
                ></el-option>
            </el-select>
        </el-form-item>
    </el-form>
</template>

<script setup lang="jsx">
import { ref } from 'vue';
const formRef = ref(null);
const form = ref({
    firstName: '',
    lastName: '',
    birthday: '',
    email: '',
    sex: '',
});
const rules = {
    firstName: [
        { required: true, message: '请输入姓名', trigger: 'blur' },
        { min: 2, max: 5, message: '长度在 2 到 5 个字符', trigger: 'blur' },
    ],
    lastName: [
        { required: true, message: '请输入名称', trigger: 'blur' },
        { min: 2, max: 5, message: '长度在 2 到 5 个字符', trigger: 'blur' },
    ],
    birthday: [
        { required: true, message: '请输入生日', trigger: 'blur' },
        { type: 'date', message: '日期格式不正确', trigger: 'blur' },
    ],
    email: [
        { required: true, message: '请输入邮箱', trigger: 'blur' },
        { type: 'email', message: '邮箱格式不正确', trigger: 'blur' },
    ],
    sex: [{ required: true, message: '请选择性别', trigger: 'change' }],
};

/**
在 Vue 3 中，defineExpose 是一个组合 API（Composition API）用于暴露组件内部的属性和方法，以便在父组件中访问。当你使用 defineExpose 来暴露一个 ref 的值时，你可以直接使用它而不需要 .value，这是因为 Vue 3 中的响应式系统和组件的上下文处理方式。

原因分析
响应式引用：
在 Vue 3 中，ref 类型的变量在组件内部访问时，需要使用 .value 来获取原始值。这是因为 ref 是一个对象，.value 属性持有实际的值。
但是，当你使用 defineExpose 暴露一个 ref 时，Vue 会自动处理这个引用，使得在父组件中可以直接访问其值。
设计目的：
defineExpose 的设计目的是简化组件的接口，使得父组件可以更方便地访问子组件的状态和方法。通过自动处理 .value，可以减少样板代码，使得使用更加直观。
 */
defineExpose({
    formRef,
    form,
});
</script>

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